markdown 绘制图形

在线制作图形并生成mermaid

流程图

流程图1

PS: hexo不支持流程图需要安装flowchart插件

1
npm install --save hexo-filter-flowchart
  • start：开始框
  • operation：处理框
  • condition：判断框
  • inputoutput：输入输出框
  • end：结束框
  • subroutine：子流程

各框通过“->”连接。定义上述基本元素的语句是：

1
2
3
元素ID=>元素类型：展示文字

元素ID(方向）->元素ID

其中，方向有以下四种

  • top
  • bottom
  • right
  • left
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
start1=>start: 初始设计
op1=>operation: P=0
op2=>operation: 结构分析与敏度分析
op3=>operation: 建立原问题（Primal Problem）
op4=>operation: 建立近似问题（Approximate Proble）
op5=>operation: 求解近似问题，得到$X^{P+1}$
cond1=>condition: 是否小于允许误差
op6=>operation: P=P+1
op7=>inputoutput: 1=2=3
op8=>subroutine: subroutine
end=>end: 结束

start1->op1->op2->op3->op4->op5->op7->op8->cond1
cond1(no)->op6->op2
cond1(yes)->end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
start1=>start: 初始设计
op1=>operation: P=0
op2=>operation: 结构分析与敏度分析
op3=>operation: 建立原问题（Primal Problem）
op4=>operation: 建立近似问题（Approximate Proble）
op5=>operation: 求解近似问题，得到$X^{P+1}$
cond1=>condition: 是否小于允许误差
op6=>operation: P=P+1
op7=>inputoutput: 1=2=3
op8=>subroutine: subroutine
end=>end: 结束

start1->op1->op2->op3->op4->op5->op7->op8->cond1
cond1(no)->op6->op2
cond1(yes)->end

流程图2

思维导图实现简单流程图

1
2
3
4
5
6
7
8
9
```mermaid
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[fa:fa-car Car]
    F --> B
```
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[fa:fa-car Car]
    F --> B

思维导出

Typora的流程图分为横向和纵向的流程图。

具体来说，是通过mermaid语言的代码块来实现的。

1
2
3
4
5
6
7
8
9
10
11
12
```mermaid
graph LR
A[青柠学术]-->B[博主]
A-->C[Up主]
A-->D[社群]
B-->E[公众号]
B-->F[知乎]
C-->H[B站]
C-->I[荔枝微课]
D-->J[知识星球]
D-->K[微信群]
```
graph LR
A[青柠学术]-->B[博主]
A-->C[Up主]
A-->D[社群]
B-->E[公众号]
B-->F[知乎]
C-->H[B站]
C-->I[荔枝微课]
D-->J[知识星球]
D-->K[微信群]

写这样一个思维导图代码其实非常简单。

其中mermaid为代码块的语言，graph LR代表横向流程图。

框图中的每个节点用ABCD...代替，相同字母代表同一节点，节点内容在[]内填写。

以上是横向流程图，下面看下竖向思维导图。

1
2
3
4
5
6
7
8
9
10
11
12
```mermaid
graph TD
A[青柠学术]-->B[博主]
A-->C[Up主]
A-->D[社群]
B-->E[公众号]
B-->F[知乎]
C-->H[B站]
C-->I[荔枝微课]
D-->J[知识星球]
D-->K[微信群]
```
graph TD
A[青柠学术]-->B[博主]
A-->C[Up主]
A-->D[社群]
B-->E[公众号]
B-->F[知乎]
C-->H[B站]
C-->I[荔枝微课]
D-->J[知识星球]
D-->K[微信群]

时序图

时序图的代码示例如下：

1
2
3
4
5
6
7
8
```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+Tom: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+Tom: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

状态图

1
2
3
4
5
6
7
8
9
```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

饼图

1
2
3
4
5
6
```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
#typora #mermaid
markdown 绘制图形
http://example.com/2021/10/21/typora图/
作者
John Doe
发布于
2021年10月21日
许可协议