如何优雅的用 Markdown 画流程图

公众号关注 「奇妙的 Linux 世界」

设为「星标」，每天带你玩转 Linux ！

今天推荐的这个项目是「mermaid」，一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。

Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。

下面是一些可以使用 Mermaid 创建的图表示例：

1、流程图

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

2、时序图

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
  John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

3、甘特图

gantt
  section Section
  Completed :done,   des1, 2014-01-06,2014-01-08
  Active       :active, des2, 2014-01-07, 3d
  Parallel 1   :         des3, after des1, 1d
  Parallel 2   :         des4, after des1, 1d
  Parallel 3   :         des5, after des3, 1d
  Parallel 4   :         des6, after des4, 1d

4、类图

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}

5、饼图

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

体验地址：https://mermaid-js.github.io/mermaid-live-editor/edit

开源项目地址：https://github/mermaid-js/mermaid

开源项目作者：mermaid-js

本文转载自：「GitHub黑板报」，原文：https://tinyurl/3tu5yrca，版权归原作者所有。欢迎投稿，投稿邮箱: editor@hi-linux。

最近，我们建立了一个技术交流微信群。目前群里已加入了不少行业内的大神，有兴趣的同学可以加入和我们一起交流技术，在 「奇妙的 Linux 世界」 公众号直接回复 「加群」 邀请你入群。

你可能还喜欢

点击下方图片即可阅读

eCapture : 一款无需 CA 证书，直接抓取 HTTPS 网络明文通讯的神器


点击上方图片，『美团|饿了么』外卖红包天天免费领

更多有趣的互联网新鲜事，关注「奇妙的互联网」视频号全了解！