create account

怎么使用markdownplus画流程图/How to use markdownplus to create a flow chart by dalao

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @dalao · (edited)
$0.76
怎么使用markdownplus画流程图/How to use markdownplus to create a flow chart
Summary:
Markdown-plus is a markdown editor, but  it also can help us to create a flow chart .  Today i will show you how to use markdownplus to create a flow chart.
Markdown-plus从名字看是markdown的升级版，不仅仅可以让我们用md语法写文章，同时支持让我们创建图表，今天我介绍如何使用markdown-plus 创建流程图。
#### What Will I Learn?/本教程知识点
- markdown代码如何输入
- markdown-plus 如何支持扩展语法
- mermaid流程图语法

#### Requirements/需要具备的条件
- 认识简单英文
- 知晓简单markdown语法
- 下载markdown-plus

#### Difficulty/难度
简单

####  Tutorial Contents/教程内容
下面先看一个例子：
![360截图20180114002422264.jpg](https://steemitimages.com/DQmPNN9mo8zksoqRQKuCz6xFuVoQBeTRtrifh8pubJzC2i8/360%E6%88%AA%E5%9B%BE20180114002422264.jpg)
其实现的代码为：
````
```mermaid
graph TD
A[dalao] -->|utopian/dalao| B(laoer)
B --> C{laosan}
C -->|One| D[1]
C -->|Two| E[2]
C -->|Three| F[3]
```
````
### 知识点1： markdown代码如何输入
markdown 里面代码是使用 英文状态下的4个顿号括起来的，如下：
````
····
代码  //此时，这部分内容是不被执行的，在markdown会直接显示出来。
····
````
效果是代码高亮，区别于别的内容。
### 知识点2：扩展语法如何支持
想要实现流程图，markdown语法是不支持的，而markdown-plus支持语法扩展，所以我们可以在markdown-plus输入别的语法来实现我们需要的功能。
````
····mermaid
代码区域
····
````
这里我们使用扩展语法 mermaid来制作 流程图，此时，代码区域的内容会被执行。
### 知识点3：mermaid绘制流程图语法
````
graph TD
````
这是定义图表，默认语句

3.1. 定义元素
````
A[name]
````
因为是流程图，所以每个元素都是按顺序定义的，第一个元素用A定义，以此类推，B，C……这个样子。每个元素的样式可以通过括号进行更改。
()  带圆角
![360截图20180114004228425.jpg](https://steemitimages.com/DQmaaxewJeU1tDfQj2kLHNQVEqBgRVPqSviAdoNVx4tq1Jm/360%E6%88%AA%E5%9B%BE20180114004228425.jpg)
[] 长方形
![360截图20180114004200495.jpg](https://steemitimages.com/DQmdvwXWXSToz4GCZn54YwhT5M1Ng6KkkMvtGgVk5W6WbSd/360%E6%88%AA%E5%9B%BE20180114004200495.jpg)
{} 菱形
![360截图20180114004128560.jpg](https://steemitimages.com/DQmR3rH7tTxYr8kAq4dzpBvfi6axK662FEyEXvZZbyhZVKA/360%E6%88%AA%E5%9B%BE20180114004128560.jpg)
 3.2 定义线上文字
````
|text|
````
使用2个竖线将文字括起来，这部分内容就是线上文字
![360截图20180114004300866.jpg](https://steemitimages.com/DQmQSvH8dHBaJmSGNfYKwvemKirMJMU3CnUSv2JBS3CfpXQ/360%E6%88%AA%E5%9B%BE20180114004300866.jpg)
3.3  元素连接
````
B --> C{laosan}
````
![360截图20180114004420879.jpg](https://steemitimages.com/DQmP3aVA8jCBjm4y8VbPVtdqGhbfFH2SSrcZtnwLx3SWoTq/360%E6%88%AA%E5%9B%BE20180114004420879.jpg)
已经定义过的元素，可以直接使用序号标签代替， 使用-->进行连接、此时B直接指向到C

````
A[dalao] -->|utopian/dalao| B(laoer)
````
![360截图20180114004501992.jpg](https://steemitimages.com/DQmaVAjKMsBWNYe178r5m9X2iRAiPvZrTPNUmrmagxkHFQW/360%E6%88%AA%E5%9B%BE20180114004501992.jpg)
在AB之间连接线上添加文字。
------------
下面是一个稍微复杂的流程图：
![360截图20180114004735117.jpg](https://steemitimages.com/DQmUKMmhbjZceeRmeNKWcZ95A2M2gRB3eTj5Fr8iPJB6jiT/360%E6%88%AA%E5%9B%BE20180114004735117.jpg)
代码如下：
```mermaid
graph TD
A[A] -->|utopian/dalao| B(B)
B --> C{C}
B --> |DDD|D{C}
A-->|SS|C
C -->|One| D[1]
C -->|Two| E[2]
C -->|Three| F[3]
```
----------------
谢谢阅读 本教程！

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@dalao/markdownplus-how-to-use-markdownplus-to-create-a-flow-chart">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , ,
properties (23)
authordalao
permlinkmarkdownplus-how-to-use-markdownplus-to-create-a-flow-chart
categoryutopian-io
json_metadata{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":31993596,"name":"markdown-plus","full_name":"tylingsoft/markdown-plus","html_url":"https://github.com/tylingsoft/markdown-plus","fork":false,"owner":{"login":"tylingsoft"}},"pullRequests":[],"platform":"github","type":"tutorials","tags":["utopian-io"],"links":["https://utopian.io/utopian-io/@dalao/markdownplus-how-to-use-markdownplus-to-create-a-flow-chart"],"image":["https://steemitimages.com/DQmPNN9mo8zksoqRQKuCz6xFuVoQBeTRtrifh8pubJzC2i8/360%E6%88%AA%E5%9B%BE20180114002422264.jpg","https://steemitimages.com/DQmaaxewJeU1tDfQj2kLHNQVEqBgRVPqSviAdoNVx4tq1Jm/360%E6%88%AA%E5%9B%BE20180114004228425.jpg","https://steemitimages.com/DQmdvwXWXSToz4GCZn54YwhT5M1Ng6KkkMvtGgVk5W6WbSd/360%E6%88%AA%E5%9B%BE20180114004200495.jpg","https://steemitimages.com/DQmR3rH7tTxYr8kAq4dzpBvfi6axK662FEyEXvZZbyhZVKA/360%E6%88%AA%E5%9B%BE20180114004128560.jpg","https://steemitimages.com/DQmQSvH8dHBaJmSGNfYKwvemKirMJMU3CnUSv2JBS3CfpXQ/360%E6%88%AA%E5%9B%BE20180114004300866.jpg","https://steemitimages.com/DQmP3aVA8jCBjm4y8VbPVtdqGhbfFH2SSrcZtnwLx3SWoTq/360%E6%88%AA%E5%9B%BE20180114004420879.jpg","https://steemitimages.com/DQmaVAjKMsBWNYe178r5m9X2iRAiPvZrTPNUmrmagxkHFQW/360%E6%88%AA%E5%9B%BE20180114004501992.jpg","https://steemitimages.com/DQmUKMmhbjZceeRmeNKWcZ95A2M2gRB3eTj5Fr8iPJB6jiT/360%E6%88%AA%E5%9B%BE20180114004735117.jpg"],"moderator":{"account":"deathwing","time":"2018-01-17T19:06:42.442Z","reviewed":false,"pending":false,"flagged":true}}
created2018-01-13 16:51:57
last_update2018-01-17 19:06:42
depth0
children2
last_payout2018-01-20 16:51:57
cashout_time1969-12-31 23:59:59
total_payout_value0.533 HBD
curator_payout_value0.230 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,883
author_reputation1,388,898,905,022
root_title"怎么使用markdownplus画流程图/How to use markdownplus to create a flow chart"
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id29,269,074
net_rshares112,779,100,291
author_curate_reward""
vote details (3)
@deathwing · 
Your contribution cannot be approved because it does not follow the [Utopian Rules](https://utopian.io/rules).

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**
properties (22)
authordeathwing
permlinkre-dalao-markdownplus-how-to-use-markdownplus-to-create-a-flow-chart-20180117t190705406z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-01-17 19:07:03
last_update2018-01-17 19:07:03
depth1
children0
last_payout2018-01-24 19:07:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length229
author_reputation269,077,595,754,009
root_title"怎么使用markdownplus画流程图/How to use markdownplus to create a flow chart"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id30,237,066
net_rshares0
@manishmike10 · 
Thank you for the contribution. It has been approved.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**
properties (22)
authormanishmike10
permlinkre-dalao-markdownplus-how-to-use-markdownplus-to-create-a-flow-chart-20180114t043339116z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-01-14 04:33:39
last_update2018-01-14 04:33:39
depth1
children0
last_payout2018-01-21 04:33:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length172
author_reputation20,399,732,899,016
root_title"怎么使用markdownplus画流程图/How to use markdownplus to create a flow chart"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id29,376,878
net_rshares0
Help/Feedback