Markdown 渲染图形~一

前言

​ Markdown的原生语法不支持绘制图形，但是通过Mermaid扩展，我们可以将一些格式化的文字渲染成我们需要的图形，用几行文字就可以生成一幅完整且美观的图片(直观解释：用文本驱动图形的生成)。常用的图形有 “流程图”、”时序图”、”类图”、”状态图”、”甘特图”、”饼图” 等，使用 JS ( JavaScript)进行本地渲染，广泛集成于许多 Markdown 编辑器中。

流程图

—Flowchart

流程图符号和含义

​ Mermaid 的流程图是采用象形的表达形式，非常类似中国象形，理解起来也不难。由几何图形节点以及连接线组成，几何图形节点是流程图内各元素的载体，通常用形状来区分其属性。比如矩形 []，圆角矩形 ()，圆形 (())。

​ 例如圆形代表开始或结束、菱形代表判断等。连接线用于描述几何图形节点之间的联系，可能是有向线段，也可能是无向线段等。基本的流程图包含：流程图布局方向、几何图形和连接线三部分组成。用来表示一个过程或工作流的图表，它帮助我们理解如何一步步完成任务。

流程图布局方向

• TB: top bottom 从上到下
• BT: bottom top 从下到上
• RL: right left 从右到左
• LR: left right 从左到右
• TD: 等同于 TB

几何图形

图形	符号含义	使用示例
圆角矩形	开始和结束	id(“文字”)
矩形	过程环节	id["文字"]
单向箭头线段	流程进行方向
菱形	决策判断	id{"文字"}
平行四边形	输入	id [/”文字”/]
反向平行四边形	输出	id [\”文字”]
圆形	连接，避免流程图	id(("文字"))
双圈节点	重要的步骤或状态	id((("文字")))
右向旗帜节点（不对称节点）	标志提示	id>"文字"]

示例：

graph TB
    start("圆角矩形")
    rectangle["矩形"]
    rhombus{"菱形"}
    round(("圆形"))
    round-plus((("双圈节点")))
    right_arrow>"右向旗帜节点"]
    节点ID{{节点显示文本}}
    右倾平行四边形[/平行四边--右倾/]
        左倾平行四边形[\平行四边形--左倾\]
        梯形[/梯形--正向\]
        反向梯形[\梯形--反向/]

graph TB
    start("圆角矩形")
    rectangle["矩形"]
    rhombus{"菱形"}
    round(("圆形"))
    round-plus((("双圈节点")))
    right_arrow>"右向旗帜节点"]
    节点ID{{节点显示文本}}
    右倾平行四边形[/平行四边--右倾/]
        左倾平行四边形[\平行四边形--左倾\]
        梯形[/梯形--正向\]
        反向梯形[\梯形--反向/]

节点连接线

表述	说明	使用示例
-->	有箭头实线	A(打开冰箱门)-->B{装入大象}
---	无箭头实线	A(打开冰箱门)---B{装入大象}
--	单线	A(打开冰箱门)--B{装入大象}
--text--	单线上加文字	A(打开冰箱门)--查看老赵留下的便签--B{装入大象}
==	粗线	A(打开冰箱门)==>B{装入大象}
==text==	粗线加文字
-.-	无箭头虚线
-.->	有箭头虚线
-.text.-	虚线加文字

箭头连线示例

graph TB
Start(开始) --> Open[打开冰箱门]
Open --> Put[把大象放进去]
Put[把大象放进去] --> IsFit{"冰箱小不小？"}
IsFit -->|不小| Close[把冰箱门关上]
Close --> End(结束)
IsFit -->|小| Change[换个大冰箱]
Change --> Open

graph TB
Start(开始) --> Open[打开冰箱门]
Open --> Put[把大象放进去]
Put[把大象放进去] --> IsFit{"冰箱小不小？"}
IsFit -->|不小| Close[把冰箱门关上]
Close --> End(结束)
IsFit ==>|小| Change[换个大冰箱]
Change --> Open

给流程图做标题

将其添加到流程图 TD 定义之后的顶部。这将定义一个框，用下划线设置其文本的样式，并使框填充和描边为空白 #FFF（样式标题），并将其链接到实际的第一步/框，从而使其显示在顶部，同时使用 linkStyle 0 隐藏链接

graph TD

title[<u> 把大象装入冰箱步骤</u>]
title-->Open[打开冰箱门]
style title fill:#FFF,stroke:#FFF
linkStyle 0 stroke:#FFF,stroke-width:0;


Open --> Put[把大象放进去]
Put[把大象放进去] --> IsFit{"冰箱小不小？"}
IsFit -->|不小| Close[把冰箱门关上]
Close --> End(结束)
IsFit ==>|小| Change[换个大冰箱]
Change --> Open

graph TD

title[<u> 把大象装入冰箱步骤</u>]
title-->Open[打开冰箱门]
style title fill:#FFF,stroke:#FFF
linkStyle 0 stroke:#FFF,stroke-width:0;


Open --> Put[把大象放进去]
Put[把大象放进去] --> IsFit{"冰箱小不小？"}
IsFit -->|不小| Close[把冰箱门关上]
Close --> End(结束)
IsFit ==>|小| Change[换个大冰箱]
Change --> Open

---

子图

—Subgraphs

​ 子图用于将相关的节点和连线组织在一起，使复杂的流程图更加清晰和易于理解。子图可以嵌套，也可以相互连接。

格式：

subgraph title
graph definition
end

代码示例一

graph TB

    subgraph 图3
    two1---two2
    end
    subgraph 图2
    three1 ==> three2
    end
        subgraph 图1
    one1-->one2
    end
    one1-->two2
style 图2 fill:#f9f,stroke:#333,stroke-width:4px

graph TB

    subgraph 图3
    two1---two2
    end
    subgraph 图2
    three1 ==> three2
    end
        subgraph 图1
    one1-->one2
    end
    one1-->two2
style 图2 fill:#f9f,stroke:#333,stroke-width:4px

代码示例二

graph LR;
    subgraph 一级子图
        direction TB
        subgraph 二级子图1
            direction RL
            i1 --> f1
        end
        subgraph 二级子图2
            direction BT
            i2 --> f2
        end
    end
    A --> 一级子图 --> B
    二级子图1 --> 二级子图2

graph LR;
    subgraph 一级子图
        direction TB
        subgraph 二级子图1
            direction RL
            i1 --> f1
        end
        subgraph 二级子图2
            direction BT
            i2 --> f2
        end
    end
    A --> 一级子图 --> B
    二级子图1 --> 二级子图2

饼图

—Pie Chart

​ 饼图的定义包含「标题」、「内容名称」和「内容权重」三项，其中「内容权重」会在渲染时，自动转换为百分比并显示在饼图上。

pie title 宠物的选择
    "狗" : 386
    "猫" : 200
    "兔子" : 20
    "大象":10

对上面的这个例子进行一些变体，让相应的数据能够展示出来

pie 
        showData
        title 宠物的选择
    "狗" : 386
    "猫" : 200
    "兔子" : 20
    "大象":10