流程图与代码的互相转换

[pheyer]

最近才发现流程图工具 mermaid，可以在 Markdown 里写代码自动生成流程图，初用起来觉得很强大，但是真正做了几个图之后就会发现写代码还是蛮麻烦的，尤其是一些箭头、方框样式的代码敲入，还有变量命名，重复性的东西非常多。

我想大家之所以喜欢这样的工具，是因为可以在 Markdown 里直接以纯文本的方式用，集成起来方便，更重要的也是修改 /编辑起来也比较方便。但未必是每个人都喜欢用代码的方式画图

如果利用 mermaid 做一个 Web 系统，模仿以前 Visio 那种拖控件的方式来画流程图是不是更好一些？画好之后，一键生成代码，然后在 Markdown 里粘贴。

后续流程图如果有简单的修改，可以直接在 Markdown 文档里直接编辑代码修改；如果有大改，那么就复制代码到刚才所说的 Web 系统网页中，重新生成流程图，然后再在流程图中进行拖控件方式的修改。改好了之后再重新复制代码就行。

这样才是更好的 Markdown 流程图工具对不对？

[feiyuanqiu]

可视化的拖拽生成代码是一件说起来很容易做起来很繁琐的事情，楼主有想法了可以先去做做试试

[pheyer]

@feiyuanqiu 关键我不是做 web 的

[sobigfish]

非要转为 mermaid 的 md 格式是想方便版本控制么？ 其他工具画好了就 OK 了非要转成 Markdown 流程图？

[pheyer]

@sobigfish 版本控制肯定是方便一些啊，其它工具画好的话在笔记工具里面用必须用 web 图片链接或者本地图片链接，用代码的话就没有这个问题，另外一方面代码生成的话感觉自动布局的效果好一些

[secondwtq]

版本控制我觉得不好做 ...

其实我比较偏向于一个在线工具生成一个 hash 唯一标识某一个特定的图的特定版本，然后像 OLE 或者 HTML <object> 一样嵌在 Markdown 里面，本地再做个缓存应付离线的情况

[jswh]

https://www.websequencediagrams.com/
是这个嘛

[pheyer]

@jswh 有点像，拖控件可以生成代码，但是这个只能画时序图吧，而且可以拖动的控件有限

[huangdayu]

我也有这个需求

[WangYihui]

我也有这个需求,不知道低代码开发平台相关的技术能否用过来