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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2948 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

只需关注逻辑，无需考虑布局。
基于上下文的自动补全（这是比同类软件改进的地方）
语法简单

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

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

mage

Chart

流程图

上下文

33 条回复 • 2018-06-25 13:55:01 +08:00

feipigzi

2016-11-02 20:10:49 +08:00

会写代码的产品经理，那就不止是『人见人黑』了。自动补全做的蛮好，国内貌似还没这么方便的工具！ MARK!

joyc

2016-11-02 20:21:11 +08:00 via Android

开始点不了呢

olindk

2016-11-02 20:22:52 +08:00

@joyc http://chartmage.com/ 打不开吗？手机访问只能看到个介绍页，操作还得电脑来！因为显示屏空间不够。

iannil

2016-11-02 20:29:32 +08:00

为行动力和进取心点赞

feiyuanqiu

2016-11-02 20:29:50 +08:00

http://knsv.github.io/mermaid/index.html

olindk

2016-11-02 20:36:33 +08:00

@feiyuanqiu 我在 About 里有提到，是基于 Mermaid 做的。主要的改进点是： 1) 增加了基于上下文的自动补全，这对于非英语用户来说尤其有用，输入起来嗖嗖的。这也是我最初做这个产品的出发点； 2) 重新设计了流程图的语法，输入起来更加接近自然语言。

olindk

2016-11-02 21:05:47 +08:00

@feipigzi @iannil 谢谢！欢迎拍砖，这样我也会更有动力持续优化下去！

dxmanoo

2016-11-02 22:40:59 +08:00

1. 之前用过 DOT+ Graphicviz 挺好的，所以对 DOT 语法比较熟悉， Po 主这个算是简化了的语法，上手容易，但是自由度貌似不高。
2. Graphicviz 的缺点是安装麻烦和不能同时 preview ，这点 Chart Mage 做到了，挺好的。
3. 其他没有详细用了，以后会持续关注，感恩楼主做好的工具。有用户群吗，有的话私信拉我嘻嘻。

dxmanoo

2016-11-02 22:43:18 +08:00

呃呃这里没私信～

kxxoling

2016-11-03 00:40:40 +08:00

会写代码的 PM 还自称“人见人黑”，你还让不让其他 PM 活啦！ 23333

strwei

2016-11-03 02:28:56 +08:00

百度脑图

kba977

2016-11-03 10:34:56 +08:00 via iPhone

记得马克飞象貌似就能实现呀，还可以和印象笔记同步。
https://maxiang.io

olindk

2016-11-03 11:13:25 +08:00

@kba977 其实基于文本的 UML 做图工具有不少，马克飞象也用的是一个类似的库。差别主要在于我做了很多自动补全的逻辑——这类工具最大的缺点就是输入繁琐（尤其是非英语用户），所以用 Chart Mage 的好处就在于输入起来嗖嗖快。推荐你亲身体验一下 : )

olindk

2016-11-03 11:15:11 +08:00

@strwei 百度脑图是专门用于画思维导图的， Chart Mage 是专门用于画时序图和流程图的，定位完全不同撒。

kba977

2016-11-03 11:23:04 +08:00

@olindk 试了下，确实嗖嗖的哈，支持👍

提个小小的建议，就是敲空行稍微有点不是很方便（得先按下空格，然后按向左，之后回车才能换行)

kba977

2016-11-03 11:26:16 +08:00

@olindk 好吧，原来和 sublime 一样按住 Shift 就好啦😄

olindk

2016-11-03 11:26:24 +08:00

@dxmanoo 刚刚建了个 Q 群方便大家随时吐槽，感兴趣的朋友欢迎加入交流！ QQ 群号： 342459635 。或者扫二维码：

olindk

2016-11-03 11:28:27 +08:00

@kba977 是的，因为编辑器是基于 CodeMirror 开发的，所以自带不少 sublime 的键位😁

fancymax

2016-11-03 13:41:05 +08:00

@olindk 不错啊，挺有用而且也挺好用的。
另外包装成 App 是不是更方便一点。

ruibin688

2016-11-03 14:24:53 +08:00

自动补全确实确实能提高不少效率。提几点建议： 1.自动补全能够兼容大小写 2.能够将项目保存到服务器 3.UI 方面， websequencediagrams 还是比较值得借鉴的。 po 主继续加油

olindk

2016-11-03 15:11:56 +08:00 via iPhone

@fancymax 🤔值得考虑，包装一下我还不用愁兼容性问题了😁

olindk

2016-11-03 15:13:16 +08:00 via iPhone

@ruibin688 多谢提议，前两点已经规划做了。 UI 上确实还需要打磨细节🤓

RockShake

2016-11-03 15:19:21 +08:00

楼主，右边的要能直接拖到左边形成代码，都不用敲了

olindk

2016-11-03 15:49:07 +08:00 via iPhone

@RockShake 不好意思没太明白你的意思😅

RockShake

2016-11-03 17:01:36 +08:00

@olindk 很容易理解啊，左边现在是编辑模块，右边是展示区，如果右边也能编辑呢

comcuter

2016-11-03 19:37:02 +08:00

@RockShake 如果右边也可以编辑, 把右边的可以拖到左边, 效率就低了, 没有直接在左边快.

olindk

2016-11-03 19:37:36 +08:00 via iPhone

@RockShake 这个工具的目标就是画图，用这种文本的形式是为了快速出图，只需关注逻辑不用关注样式。

xingzhi

2016-11-04 10:29:54 +08:00

挺好的，我也刚好需要时序图，试试看

sshsky

2016-11-04 12:07:01 +08:00

实践能力强 @olindk

olindk

2016-11-06 13:50:08 +08:00

根据各位捧场大爷的意见 @ruibin688 @comcuter ，我今天更新了一版：
1. 时序图补全改为大小写不敏感
2. 使图表适应屏幕大小（对笔记本更加友好）
3. 使导出的图片文件名为图表名称
4. 为导出的图片增加白色背景色（不再是透明底了）
5. 简化了流程图的 sample 内容
6. 修复了时序图 alt 语句的缩进问题
7. 修复了时序图 note 补全的一个小问题

如果大家感兴趣的话也欢迎加 Q 群: 342459635 。在里面提议或者直接 Q 我都可以😁 谢谢！

wsph123

2016-11-06 22:10:05 +08:00

这个好好用

pheyer

2018-03-01 09:30:15 +08:00

其实 Sublime + PlantUML 就很不错，这个实时性强一些而已

jaredli

2018-06-25 13:55:01 +08:00

非常棒的应用。要是可以云端存储就更好了。老是忘记图在哪台机器上。。。anyway，非常棒！