爱意满满的作品展示区。
olindk

[我的第一个 Web App] 一个基于文本的时序图与流程图工具

  •  6
     
  •   olindk · Nov 2, 2016 · 8145 views
  •   You need to sign in to view this topic
    This topic created in 3654 days ago, the information mentioned may be changed or developed.

    大家好,我是人见人黑的产品经理。因为在 Mac 上找不到满意的时序图&流程图工具,所以我四个月前辞了职(其实本来就想辞职),自学了点前端技术(皮毛),撸了个基于文本的 UML 画图工具Chart Mage。网站链接: http://chartmage.com/ 截图 它是基于以下 3 个目标设计的:

    1. 只需关注逻辑,无需考虑布局。
    2. 基于上下文的自动补全(这是比同类软件改进的地方)
    3. 语法简单

    如果这是你第一次用基于文本的 UML 画图工具,你会发现再也不用把鼠标拽来拽去调整距离和对齐了,你只需要关注你最想要表达的——业务逻辑。如果你用过类似的工具如 websequencediagrams ,则会发现 Chart Mage 会根据上下文给出合理猜测的补全建议。除此之外, Chart Mage 还支持流程图。

    Chart Mage 刚刚上线,兼容性上还差点儿,欢迎使用 Chrome 或 Firefox 体验。恳请大家热情拍砖,留下你宝贵的意见,好让我持续优化这个产品,谢谢!

    33 replies  •  2018-06-25 13:55:01 +08:00
    feipigzi
    feipigzi
    Nov 2, 2016
    1
    会写代码的产品经理,那就不止是『人见人黑』了。自动补全做的蛮好,国内貌似还没这么方便的工具! MARK!
    joyc
    joyc
    Nov 2, 2016 via Android
    2
    开始点不了呢
    olindk
    olindk
    OP
    Nov 2, 2016
    3
    @joyc http://chartmage.com/ 打不开吗?手机访问只能看到个介绍页,操作还得电脑来!因为显示屏空间不够。
    iannil
    iannil
    Nov 2, 2016
    4
    为行动力和进取心点赞
    olindk
    olindk
    OP
    Nov 2, 2016
    6
    @feiyuanqiu 我在 About 里有提到,是基于 Mermaid 做的。主要的改进点是: 1) 增加了基于上下文的自动补全,这对于非英语用户来说尤其有用,输入起来嗖嗖的。这也是我最初做这个产品的出发点; 2) 重新设计了流程图的语法,输入起来更加接近自然语言。
    olindk
    olindk
    OP
    Nov 2, 2016
    7
    @feipigzi @iannil 谢谢!欢迎拍砖,这样我也会更有动力持续优化下去!
    dxmanoo
    dxmanoo
    Nov 2, 2016
    8
    1. 之前用过 DOT+ Graphicviz 挺好的,所以对 DOT 语法比较熟悉, Po 主这个算是简化了的语法,上手容易,但是自由度貌似不高。
    2. Graphicviz 的缺点是安装麻烦和不能同时 preview ,这点 Chart Mage 做到了,挺好的。
    3. 其他没有详细用了,以后会持续关注,感恩楼主做好的工具。有用户群吗,有的话私信拉我嘻嘻。
    dxmanoo
    dxmanoo
    Nov 2, 2016
    9
    呃呃 这里没私信~
    kxxoling
    kxxoling
    Nov 3, 2016
    10
    会写代码的 PM 还自称“人见人黑”,你还让不让其他 PM 活啦! 23333
    strwei
    strwei
    Nov 3, 2016
    11
    百度脑图
    kba977
    kba977
    Nov 3, 2016 via iPhone
    12
    记得马克飞象貌似就能实现呀,还可以和印象笔记同步。
    https://maxiang.io
    olindk
    olindk
    OP
    Nov 3, 2016
    13
    @kba977 其实基于文本的 UML 做图工具有不少,马克飞象也用的是一个类似的库。差别主要在于我做了很多自动补全的逻辑——这类工具最大的缺点就是输入繁琐(尤其是非英语用户),所以用 Chart Mage 的好处就在于输入起来嗖嗖快。推荐你亲身体验一下 : )
    olindk
    olindk
    OP
    Nov 3, 2016
    14
    @strwei 百度脑图是专门用于画思维导图的, Chart Mage 是专门用于画时序图和流程图的,定位完全不同撒。
    kba977
    kba977
    Nov 3, 2016
    15
    @olindk 试了下,确实嗖嗖的哈,支持👍

    提个小小的建议,就是敲空行稍微有点不是很方便(得先按下空格,然后按向左,之后回车才能换行)
    kba977
    kba977
    Nov 3, 2016
    16
    @olindk 好吧,原来和 sublime 一样 按住 Shift 就好啦😄
    olindk
    olindk
    OP
    Nov 3, 2016
    17
    @dxmanoo 刚刚建了个 Q 群方便大家随时吐槽,感兴趣的朋友欢迎加入交流! QQ 群号: 342459635 。或者扫二维码:
    olindk
    olindk
    OP
    Nov 3, 2016
    18
    @kba977 是的,因为编辑器是基于 CodeMirror 开发的,所以自带不少 sublime 的键位😁
    fancymax
    fancymax
    Nov 3, 2016
    19
    @olindk 不错啊,挺有用而且也挺好用的。
    另外包装成 App 是不是更方便一点。
    ruibin688
    ruibin688
    Nov 3, 2016
    20
    自动补全确实确实能提高不少效率。提几点建议: 1.自动补全能够兼容大小写 2.能够将项目保存到服务器 3.UI 方面, websequencediagrams 还是比较值得借鉴的。 po 主继续加油
    olindk
    olindk
    OP
    Nov 3, 2016 via iPhone
    21
    @fancymax 🤔值得考虑,包装一下我还不用愁兼容性问题了😁
    olindk
    olindk
    OP
    Nov 3, 2016 via iPhone
    22
    @ruibin688 多谢提议,前两点已经规划做了。 UI 上确实还需要打磨细节🤓
    Crixs
    Crixs
    Nov 3, 2016
    23
    楼主,右边的要能直接拖到左边形成代码,都不用敲了
    olindk
    olindk
    OP
    Nov 3, 2016 via iPhone
    24
    @RockShake 不好意思没太明白你的意思😅
    Crixs
    Crixs
    Nov 3, 2016
    25
    @olindk 很容易理解啊,左边现在是编辑模块,右边是展示区,如果右边也能编辑呢
    comcuter
    comcuter
    Nov 3, 2016
    26
    @RockShake 如果右边也可以编辑, 把右边的可以拖到左边, 效率就低了, 没有直接在左边快.
    olindk
    olindk
    OP
    Nov 3, 2016 via iPhone
    27
    @RockShake 这个工具的目标就是画图,用这种文本的形式是为了快速出图,只需关注逻辑不用关注样式。
    xingzhi
    xingzhi
    Nov 4, 2016
    28
    挺好的,我也刚好需要时序图,试试看
    sshsky
    sshsky
    Nov 4, 2016
    29
    实践能力强 @olindk
    olindk
    olindk
    OP
    Nov 6, 2016
    30
    根据各位捧场大爷的意见 @ruibin688 @comcuter ,我今天更新了一版:
    1. 时序图补全改为大小写不敏感
    2. 使图表适应屏幕大小(对笔记本更加友好)
    3. 使导出的图片文件名为图表名称
    4. 为导出的图片增加白色背景色(不再是透明底了)
    5. 简化了流程图的 sample 内容
    6. 修复了时序图 alt 语句的缩进问题
    7. 修复了时序图 note 补全的一个小问题

    如果大家感兴趣的话也欢迎加 Q 群: 342459635 。在里面提议或者直接 Q 我都可以😁 谢谢!
    wsph123
    wsph123
    Nov 6, 2016
    31
    这个好好用
    pheyer
    pheyer
    Mar 1, 2018
    32
    其实 Sublime + PlantUML 就很不错,这个实时性强一些而已
    jaredli
    jaredli
    Jun 25, 2018
    33
    非常棒的应用。要是可以云端存储就更好了。老是忘记图在哪台机器上。。。anyway,非常棒!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2793 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 48ms · UTC 10:54 · PVG 18:54 · LAX 02:54 · JFK 05:54
    ♥ Do have faith in what you're doing.