用Markdown语法创建图表文档，这个工具真心厉害
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个基于 Javascript 的图表绘制工具——Mermaid。
Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。
如何使用
1 直接在Mermaid在线编辑器中使用：mermaid.live
2 使用Mermaid插件
Mermaid目前在GitLab、Azure Devops、Tuleap、Joplin 、Notion五个平台添加默认插件，可直接使用。其他平台，例如：GitHub、GitBook、Wordpress、Hexo、Vs Code等需要手动添加插件。
查看支持的平台：https://mermaid-js.github.io/mermaid/#/./integrations
在vs code中使用
3 调用 Mermaid Javascript API
通过 CDN 调用示例：
<html><body><script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script><script>mermaid.initialize({ startOnLoad: true });</script>Here is one mermaid diagram:<div class="mermaid">graph TDA[Client] --> B[Load Balancer]B --> C[Server1]B --> D[Server2]</div>And here is another:<div class="mermaid">graph TDA[Client] -->|tcp_123|B(Load Balancer)B -->|tcp_456| C[Server1]B -->|tcp_456| D[Server2]</div></body></html>或者引用单独文件：
<html lang="en"><head><meta charset="utf-8" /></head><body><div class="mermaid">graph LRA --- BB-->C[fa:fa-ban forbidden]B-->D(fa:fa-spinner);</div><div class="mermaid">graph TDA[Client] --> B[Load Balancer]B --> C[Server1]B --> D[Server2]</div><script src="The\Path\In\Your\Package\mermaid.js"></script><script>mermaid.initialize({ startOnLoad: true });</script></body></html>在Python 与 mermaid-js 集成的示例：
import base64from IPython.display import Image, displayimport matplotlib.pyplot as pltdef mm(graph):graphbytes = graph.encode("ascii")base64_bytes = base64.b64encode(graphbytes)base64_string = base64_bytes.decode("ascii")display(Image(url="https://mermaid.ink/img/" + base64_string))mm("""graph LR;A--> B & C & D;B--> A & E;C--> A & E;D--> A & E;E--> B & C & D;""")4 添加 Mermaid 作为依赖项
npm：
npm install -g yarnyarn：
yarn add mermaid或者
yarn add --dev mermaid图表示例
流程图
flowchart LRA[Hard] -->|Text| B(Round)B --> C{Decision}C -->|One| D[Result 1]C -->|Two| E[Result 2]流程图
时序图
sequenceDiagramAlice->>John: Hello John, how are you?loop HealthcheckJohn->>John: Fight against hypochondriaendNote right of John: Rational thoughts!John-->>Alice: Great!John->>Bob: How about you?Bob-->>John: Jolly good!时序图
甘特图
ganttsection SectionCompleted :done, des1, 2014-01-06,2014-01-08Active :active, des2, 2014-01-07, 3dParallel 1 : des3, after des1, 1dParallel 2 : des4, after des1, 1dParallel 3 : des5, after des3, 1dParallel 4 : des6, after des4, 1d甘特图
类图
classDiagramClass01 <|-- AveryLongClass : Cool<<Interface>> Class01Class09 --> C2 : Where am i?Class09 --* C3Class09 --|> Class07Class07 : equals()Class07 : Object[] elementDataClass01 : size()Class01 : int chimpClass01 : int gorillaclass Class10 {<<service>>int idsize()}类图
状态图
stateDiagram-v2[*] --> StillStill --> [*]Still --> MovingMoving --> StillMoving --> CrashCrash --> [*]状态图
用户体验旅程图
journeytitle My working daysection Go to workMake tea: 5: MeGo upstairs: 3: MeDo work: 1: Me, Catsection Go homeGo downstairs: 5: MeSit down: 3: Me用户体验旅程图
—END—
开源协议：MIT
开源地址：
https://github.com/mermaid-js/mermaid本文系作者 @河马 原创发布在河马博客站点。未经许可，禁止转载。
暂无评论数据