使用 Mermaid 语法创建图表

Mermaid 是一种类似于 Markdown 的语法,您可以在其中使用文本来描述和自动生成图表。使用 Mermaid 的受 Markdown 启发的语法,您可以生成流程图、UML 图、饼图、甘特图等。

许多开发人员更喜欢使用文本来描述他们的数据结构和流程,从而避免上下文切换的需要。在基于 Markdown 的文本描述中记录它们之后,您可以将其插入到 diagrams.net 编辑器中以生成图表并自动对其进行布局。

插入美人鱼图

  1. 单击排列 > 插入 > 高级 > 美人鱼。或者,单击+工具栏中的图标,然后选择“高级”>“美人鱼”

    单击排列 > 插入 > 高级 > 美人鱼以从受美人鱼 Markdown 启发的代码创建图表

  2. 将您的文本粘贴到文本框中,然后单击“插入”

    以美人鱼语法粘贴文本,然后单击插入

您的图表将根据您的文本自动创建和格式化,并作为单个形状插入到绘图画布上。

在 Diagrams.net 中编辑美人鱼代码

要查看以这种方式插入的任何图表的美人鱼代码,请选择形状,然后按Enter。您可以在此处更改代码,然后单击应用以更新绘图画布上的图表。

美人鱼语法

图表是通过使用箭头连接器链接文本标签来创建的。您可以选择不同的形状、为连接线添加标签,以及为连接线和形状设置样式。

完整语法和样式选项的美人鱼文档

| 形状样式 | [rectangle] | (rounded rectangle) |
| | ((circle)) | {diamond} |
| 连接器样式 | 箭: A-->B | 加点: A-.-->B |
| | 没有箭头: A---B | 带标签: A-->|label|B |
| 图表类型 | graph | pie |
| | gantt | sequenceDiagram |
| | stateDiagram | classDiagram |
| | gitgraph | |
| 甘特图 | 任务状态:done, active, crit,after | section |
| 馅饼 | title | |
| gitgraph | 动作:commit, branch, checkout,merge | |
| UML | 生命线:participant | activate |
| | 容器:loop, alt,opt | class |
| 信息 | 评论: %% | note |

查看下面的示例,了解如何使用 Mermaid 语法定义文本中的各种图表。在 diagrams.net 中打开这些示例美人鱼图。

流程图

注意:标签可以包含新行以实现更清晰的布局。

graph TD
   A(Coffee machine <br>not working) --> B{Machine has power?}
   B -->|No| H(Plug in and turn on)
   B -->|Yes| C{Out of beans or water?} -->|Yes| G(Refill beans and water)
   C -->|No| D{Filter warning?} -->|Yes| I(Replace or clean filter)
   D -->|No| F(Send for repair)

美人鱼语法的流程图示例

在 diagrams.net 中打开此示例

甘特图

甘特图受到许多项目经理的喜爱,因为它们可以跟踪项目的任务、依赖关系和时间表。虽然在 diagrams.net 中创建甘特图可能很繁琐,但从文本描述中生成甘特图要容易得多。

gantt
 title Example Gantt diagram
    dateFormat  YYYY-MM-DD
    section Team 1
    Research & requirements :done, a1, 2020-03-08, 2020-04-10
    Review & documentation : after a1, 20d
    section Team 2
    Implementation      :crit, active, 2020-03-25  , 20d
    Testing      :crit, 20d

从美人鱼代码插入的甘特图示例

在 diagrams.net 中打开此示例

UML类图

以下是来自 diagrams.net 的简单类图模板在 Mermaid 语法中的外观。

classDiagram
   Person <|-- Student
   Person <|-- Professor
   Person : +String name
   Person : +String phoneNumber
   Person : +String emailAddress
   Person: +purchaseParkingPass()
   Address "1" <-- "0..1" Person:lives at
   class Student{
      +int studentNumber
      +int averageMark
      +isEligibleToEnrol()
      +getSeminarsTaken()
    }
    class Professor{
      +int salary
    }
    class Address{
      +String street
      +String city
      +String state
      +int postalCode
      +String country
      -validate()
      +outputAsLabel()  
    }           

美人鱼语法中来自 diagrams.net 的简单类示例模板

在 diagrams.net 中打开此示例

UML序列图

UML 序列图用于显示完成流程所采取的步骤和参与者。这些图在软件开发中被大量使用。

sequenceDiagram
    autonumber
    Student->>Admin: Can I enrol this semester?
    loop enrolmentCheck
        Admin->>Admin: Check previous results
    end
    Note right of Admin: Exam results may <br> be delayed
    Admin-->>Student: Enrolment success
    Admin->>Professor: Assign student to tutor
    Professor-->>Admin: Student is assigned

使用 Mermaid 语法插入的简单序列图

在 diagrams.net 中打开此示例

饼形图

虽然您可以手动构建饼图 diagrams.net,但使用 Mermaid 语法可以很容易地准确获得饼切片的正确分布。在美人鱼代码中,您可以使用百分比值,也可以使用每组的实际值。在下面的示例中,您可以看到哪几天最繁忙的提交到 GitHub 上的 diagrams.net 主存储库。

pie title Commits to mxgraph2 on GitHub
    "Sunday" : 4
    "Monday" : 5
    "Tuesday" : 7
  "Wednesday" : 3

每天提交到 mxgraph2 GitHub 存储库,使用 Mermaid 语法插入到 diagrams.net

在 diagrams.net 中打开此示例

您知道吗: Mermaid 的语法类似于 Graphviz DOT 和 PlantUML,两者都可以插入到 diagrams.net 中以根据文本描述创建图表。

查看您可以插入到图表中的所有元素

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容