Markdown流程图：扮演构建思维框架的角色

小蓝 • 2024-12-15 12:50 • 编程

一、如何渲染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流程图工具生成