XRING , Software Engineer

Flowchart

2018.07.06

flowchart

MarkEditor风格的流程图语法

流程图的语法规则实际上是基于http://adrai.github.io/flowchart.js/实现的,只要申明语言类型为flow即可。
但是我们认为原始插件的语法有些晦涩,所以在兼容原有语法的基础上,又重新进行了演绎,效果如下:

原始语法(示例)

更多请参考http://adrai.github.io/flowchart.js/


mermaid

MarkEditor 也同样支持 mermaid 的语法。

注意: 不恰当的格式,会导致 mermaid 的渲染卡住整个 MarkEditor,要特别注意不要出现中文状态下的的某些字符,比如中文问号、中文括号。

graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car]
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d
Comments
Write a Comment