技术联盟

简单详细的Typora 流程图使用

1、横向流程图源码格式(mermaid)

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    A-->F[横向流程图]
    G[横向流程图]

例如

graph LR
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a==2| E[结果2]
    A --> F[横向流程图]
    G[横向流程图]

2、竖向流程图源码格式(mermaid)

graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    A --> F[竖向流程图]

例如:

graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    A --> F[竖向流程图]

3、标准流程图源码格式(flow)

st=>start: 开始框:>https://www.baidu.com
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

例如:

st=>start: 开始框:>http://www.baidu.com
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

4、标准流程图源码格式(横向)(flow)

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

例如:

st=>start: 开始
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

5、UML时序图源码格式(sequence)

对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?
对象B->对象A: 真的好

例如:

对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?
对象B->对象A: 真的好

6、UML时序图源码复杂样例(sequence)

Title: 标题: 复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗?
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

例如:

Title: 标题:复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗?
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我完成

7、UML标准时序图源码格式(mermaid)

%% 时序图例子,->直线,-->虚线,->>实线箭头
sequenceDiagram
  participant 张三
  participant 李四
  张三->王五: 王五你好吗?
  loop 健康检查
      王五->王五: 与疾病战斗
  end
  Note right of 王五: 合理 食物 
看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好!

例如:

%% 时序图例子, ->直线, -->虚线, ->>实线箭头
sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗?
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/> 看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

8、甘特图源码样例(mermaid)

​```mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
            需求                      :done,    des1, 2014-01-06,2014-01-08
            原型                      :active,  des2, 2014-01-09, 3d
            UI设计                    : des3, after des2, 5d
          未来任务                  :  des4, after des3, 5d
        section 开发
            学习准备理解需求           :crit, done, 2014-01-06,24h
            设计框架                  :crit, done, after des2, 2d
            开发                      :crit, active, 3d
            未来任务                   :crit, 5d
            耍                         :2d
        section 测试
            功能测试                   :active, a1, after des3, 3d
            压力测试                   :after a1  , 20h
            测试报告                   : 48h
​```

例如:

%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
            需求                      :done,    des1, 2014-01-06,2014-01-08
            原型                      :active,  des2, 2014-01-09, 3d
            UI设计                     :         des3, after des2, 5d
            未来任务                     :         des4, after des3, 5d
        section 开发
            学习准备理解需求                      :crit, done, 2014-01-06,24h
            设计框架                             :crit, done, after des2, 2d
            开发                                 :crit, active, 3d
            未来任务                              :crit, 5d
            耍                                   :2d
        section 测试
            功能测试                              :active, a1, after des3, 3d
            压力测试                               :after a1  , 20h
            测试报告                               : 48h

其它说明

1、graph 说明

方向:

TB -top bottom

BT -bottom top

RL-right left

LR – left right

TD -top bottom

节点形状

矩形: [内容]

圆角矩形:(内容)

圆形:((内容))

菱形:{内容}

旗帜: >内容]

连接线

实线箭头: –>

实线直线: —

虚线箭头: -.->

虚线实线: -.-

粗实线箭头: ==>

粗实线直线:===

标签

箭头或直线后跟|标签|:A-->|标签|B

在箭头或直线中打标签:A--标签-->B

资料

mermaid官网

http://flowchart.js.org/

https://github.com/adrai/flowchart.js

http://cncounter.github.io/flowchart/

https://d3js.org/

Share this:

码字很辛苦,转载请注明来自技术联盟《简单详细的Typora 流程图使用》

评论