跳转至

Markdown图形与图表

使用 Markdown 可快速生成各类图形与图表，如思维导图、UML图、交互式图表等。

绘图库

  • markmap，将 Markdown 文本可视化为交互式思维导图，在线编辑；✓
  • Plotly，超强交互式图表及绘图库，有 Python、R、Julia、JavaScript、ggplot2、F#、MATLAB 和 Dash 版本，可用于生成交互式的统计图表、3D 图表、科学图表、SVG 和平铺地图、财务图表等；
  • Mermaid，流行的 JS 绘图库，支持各种UML图和非UML图，使用参考 Mermaid 中文文档；
  • PlantUML，老牌绘图库，支持各种UML图和非UML图，使用参考 PlantUML 中文文档；
  • Draw.io，一款非常强大的开源在线绘图神器，还有独立客户端；
  • Chart.js，一个简单、灵活、时尚的 JS 图表库；
  • Apache ECharts，一个基于 JS 的开源可视化图表库；
  • ApexCharts，一个时髦 JS 图表库，帮助开发人员为网页创建精美的交互式可视化效果；
  • 推荐10个可视化图表；

编辑器支持

  • Typora：支持 flowchart.js、js-sequence-diagrams、Mermaid。使用方法见 Typora 绘图，如果要修改图表样式见 图表选项；
  • MWeb：支持 Mermaid、PlantUML、ECharts；
  • MiaoYan：支持 Mermaid、PlantUML、Markmap；
  • YankNote：支持 Mermaid、Draw.io、ECharts、PlantUML、Markmap；

一、markmap 思维导图

使用 markmap，将 Markdown 文本可视化为交互式思维导图。

1. 独立使用

安装 markmap-cli：

npm install -g markmap-cli
markmap -h

markmap docs/markmap.md
markmap --no-toolbar docs/markmap.md
markmap --offline docs/markmap.md
markmap -o markmap.html docs/markmap.md

2. 嵌入使用

  • 通过 <iframe> 标签嵌入 markmap-cli 构建后的 html 文件即可；
  • MkDocs 插件 mkdocs-markmap，可在文档内直接用 markmap 栅栏块前后包围某块区域的方式使用，被包含的可以是标题、列表、表格、代码块、复选框、图片等，不局限于列表。也可嵌入整个外部文档，具体参考 markmap-mkdocs 示例；
  • YankNote 高级版也支持以上方式；

二、Plotly 绘图库

MkDocs：mkdocs-plotly-plugin，集成了 Plotly.js 的 MkDocs 插件。

1. 简单数据

```plotly
{
    "data": [
        {
            "x": ["giraffes", "orangutans", "monkeys", "Six", "Ten", "Three"],
            "y": [20, 14, 23, 30, 42, 18],
            "type": "bar"
        }
    ]
}
```
{ "data": [ { "x": ["giraffes", "orangutans", "monkeys", "Six", "Ten", "Three"], "y": [20, 14, 23, 30, 42, 18], "type": "bar" } ] }

2. 从文件加载数据

```plotly
{"file_path": "plotly-json/scatter.json"}
```

需要 mkdocs serve 才可以加载本地文件：

三、Mermaid 绘图

Mermaid 支持 流程图、序列图、类图、甘特图、饼图、象限图、C4图、时间线图、桑基图、框图、数据包图、架构图等…

  1. 先声明代码块语言为 mermaid；
  2. 再标记 mermaid 图类型；
  3. 然后写绘图代码。可使用 Mermaid 实时编辑器。

1. 流程图

使用 flowchart 或 graph 标记：

```mermaid
flowchart LR
    A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

效果如下：

flowchart LR
    A[Hard edge] -->B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

2. 序列图

使用 sequenceDiagram 标记：

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

效果如下：

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

3. XY 图

使用 xychart-beta 标记：

```mermaid
%%{init: {"xyChart": {"width": 800,"height": 400},"theme":"forest"} }%%

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

效果如下：

%%{init: {"xyChart": {"width": 800,"height": 400},"theme":"forest"} }%%

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

4. 甘特图

使用 gantt 标记：

```mermaid
gantt
    title 项目开发流程
    section 项目确定
        需求分析       : a1, 2016-06-22, 3d
        可行性报告     : after a1, 5d
        概念验证       : 5d
    section 项目实施
        概要设计      :2016-07-05, 5d
        详细设计      :2016-07-08, 10d
        编码          :2016-07-15, 10d
        测试          :2016-07-22, 5d
    section 发布验收
        发布: 2d
        验收: 3d
```

效果如下：

gantt
    title 项目开发流程
    section 项目确定
        需求分析       : a1, 2016-06-22, 3d
        可行性报告     : after a1, 5d
        概念验证       : 5d
    section 项目实施
        概要设计      :2016-07-05, 5d
        详细设计      :2016-07-08, 10d
        编码          :2016-07-15, 10d
        测试          :2016-07-22, 5d
    section 发布验收
        发布: 2d
        验收: 3d

5. 饼图

使用 pie 标记：

```mermaid
%%{init:{"pie":{"textPosition":0.5},"themeVariables":{"pieOuterStrokeColor":"#F2AA3B","pieStrokeColor":"#F2AA3B"}}}%%

pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150 
```

效果如下：

%%{init:{"pie":{"textPosition":0.5},"themeVariables":{"pieOuterStrokeColor":"#F2AA3B","pieStrokeColor":"#F2AA3B"}}}%%

pie
    title Pie Chart
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 150

四、PlantUML绘图

1. 时序图

```plantuml
@startuml
skinparam backgroundColor #EEEBDC
!option handwritten true

Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml
```

2. 思维导图

可使用 + - *，行首用缩进或填充的方式都可以。

```plantuml
@startmindmap
skinparam backgroundColor #EEEBDC

+[#Orange] 主节点
++[#lightgreen] 绿色
++[#FFBBCC] 玫瑰
++[#lightyellow] 蛋黄
--[#lightblue] 蓝色
---[#lightblue] 格式倒也简单，很适合嵌入在文章内
--[#lightgray] 浅灰
@endmindmap
```
add_circle2024-09-10update2025-02-15

加载评论中...