一、如何渲染Markdown流程图
1、安装插件
npm install -g markdown-it
2、编写Markdown源代码
```flow
st=>start: 开始
e=>end: 结束
op=>operation: My Operation
cond=>condition: Yes or No?
io=>inputoutput: catch something...
st->op->cond
cond(yes)->io->e
cond(no)->op
```
3、使用markdown-it渲染Markdown源代码:
var md = require('markdown-it')();
var result = md.render(`\`\`\`flow
st=>start: 开始
e=>end: 结束
op=>operation: My Operation
cond=>condition: Yes or No?
io=>inputoutput: catch something...
st->op->cond
cond(yes)->io->e
cond(no)->op
\`\`\``);
console.log(result);
4、渲染结果:
<div class="mermaid">
flowchat
st((开始))->op((My Operation))->cond((Yes
or No?))
cond->io>e((结束))
cond(no)->op
</div>
二、Markdown大战略流程图
在大战略云端IDE中,Markdown流程图的渲染已经内置,只需要以下简单的步骤
1、在Markdown文档中输入如下代码:
```flow
st=>start: 开始
op1=>operation: 操作1
op2=>operation: 操作2
e=>end: 结束
st->op1->op2->e
```
2、预览结果
<div class="mermaid">
flowchat
st((开始))->op1((操作1))->op2((操作2))->e((结束))
</div>
三、des流程图
1、安装des并创建工作目录
npm install -g des
mkdir des-workspace
cd des-workspace
2、创建des源代码文件 test.des
statechart {
State1 -> State2 : Event1 / Action1
State2 -> State3 : Event2 / Action2
State3 -> State1 : Event3 / Action3
}
3、将des源代码编译为svg格式的图片
des test.des test.svg
4、在Markdown中引用该svg图片
![](./test.svg)
四、MD流程图
MD流程图是基于纯文本的流程图,轻便而灵活
1、安装MDFlow图插件
npm install mdflow --save
2、在Markdown中输入以下代码:
sequenceDiagram
A->>B: 请求数据
B->>C: 处理数据
C-->>A: 返回响应
3、预览效果:
<div class="mermaid">
sequenceDiagram
A->>B: 请求数据
B->>C: 处理数据
C-->>A: 返回响应
</div>
五、流程图PRD
PRD中的流程图常用于阐述产品的功能流程和逻辑
1、用PRD工具画出流程图并导出jpg、png等格式的图片
2、在Markdown中引用该图片
![](./flowchart.jpg)
六、MD画流程图
MD画流程图同MD流程图类似,是基于纯文本的流程图
1、安装mdp插件
npm install mdp --save
2、在Markdown中输入以下代码:
graph LR
A-->B
B-->C
C-->D
D-->E
3、预览结果:
<div class="mermaid">
graph LR
A-->B
B-->C
C-->D
D-->E
</div>
七、流程图HTML
HTML中的流程图同PRD类似,是为了展示产品功能流程和逻辑
1、画出HTML流程图并导出图片,或使用HTML流程图工具生成
2、在Markdown中引用该图片
![](./html_flowchart.png)