Mermaid 什么是?

Mermaid是一种基于Javascript的绘图工具,使用类似于Markdown的语法,可以方便快捷地通过代码创建图表。就像用 Markdown 码字一样,高效制作简易流图。

Github项目地址:https://github.com/mermaid-js/mermaid (star:45k+)

为什么推荐Mermaid?

相信大部分开发同学都非常熟悉Markdown语法,并且习惯于使用Markdown作为写作工具。那么有没有想过使用类似的Markdown 「标记式」的语法来快速“画”出一个漂亮的流程图呢?

当然,Mermaid 就是这样的一个工具。

Mermaid的优势

一、 高效简单 – 易于编辑和生成图画

与MD类似,Mermaid并不需要特定的编辑器(如:Visio、drawio),并且主流的MD编辑器都原生集成了Mermaid(如:Typora、印象笔记等),在这些集成了Mermaid的编辑器中,可以实时查看到渲染结果。

当然,如果不需要查看渲染结果,普通的文本编辑器都能胜任。

示例一 – 流程图:

flowchart TD
	A --> |hello| B
	A --> C
	B --> D
	C --> D

示例二 – 时序图:

sequenceDiagram
    actor user as 用户
    user ->>+ sysA: req
    sysA ->>+ sysB: hello
    sysB ->>- sysA: hi
    sysA ->>- user: rsp

二、支持多种图

  1. 流程图
  2. 时序图
  3. 类图
  4. 实体关系图
  5. 状态图
  6. 甘特图
  7. 饼图
  8. Git 分支提交图

可以通过官方在线体验:https://mermaid.live/

三、更易于分享和存档

Mermaid 和 Markdown 一样,都是纯文本格式存储的语言,更加利于自己掌握内容,易于存储、解析、分享,内容不受制于特定应用的软件(Visio)或网站平台(drawio)。

四、Web友好,拥有完整的生态

Mermaid 的核心是一个基于 JS 的解析库,集成Mermaid 后可以把 Mermaid 文本直接嵌入到自己的网站中,访问者就能 直接看到 渲染后的流图。

越来越多Markdown编辑器原生集成Mermaid,Gitlab 10.3版本也集成了Mermaid。

除了核心解析库,Mermaid生态还提供了基于Monaco编辑器的语法插件,支持语法关键字提示、快速补全功能,进一步优化编写体验,降低上手成本。

最后

Mermaid 作为一个 新兴的标记语言,像极了当年 的 Markdown。假以时日,希望 Mermaid 会变得更加成熟,在有专业需求的领域里,变得更加普及,成为一种「约定俗成」的高效率标准。

分类: 未分类

6 条评论

5 อันดับ เว็บแทงบาส ยอดฮิต · 2024年2月6日 上午7:25

… [Trackback]

[…] Read More Information here on that Topic: hugr.cn/2022/03/25/mermaid-用程序员的方式画流图/ […]

casino betflik · 2024年2月6日 上午7:30

… [Trackback]

[…] Here you can find 42165 more Information on that Topic: hugr.cn/2022/03/25/mermaid-用程序员的方式画流图/ […]

ks quik · 2024年2月13日 上午7:34

… [Trackback]

[…] Here you will find 31232 additional Info to that Topic: hugr.cn/2022/03/25/mermaid-用程序员的方式画流图/ […]

ทุบตึกฟรี · 2024年2月15日 上午7:22

… [Trackback]

[…] Find More here on that Topic: hugr.cn/2022/03/25/mermaid-用程序员的方式画流图/ […]

ติดเน็ตบ้าน AIS · 2024年2月15日 上午7:42

… [Trackback]

[…] Find More Information here on that Topic: hugr.cn/2022/03/25/mermaid-用程序员的方式画流图/ […]

ข่าวกีฬา · 2024年2月17日 上午9:59

… [Trackback]

[…] Read More Info here to that Topic: hugr.cn/2022/03/25/mermaid-用程序员的方式画流图/ […]

评论已关闭。