在Hexo中使用Markdown绘制图表

jiezi

5 年前

Typora 本身支持 flow、mermaid 语言绘制时序图、甘特图、流程图等等。若要你的博客也支持解析渲染这些语言描绘的图表，则需要查看博客框架是否支持，然后进行相关配置。
以 Hexo 为例，原生不支持，但是可以通过安装插件实现以上图表的显示。

hexo-filter-mermaid-diagrams

mermaid diagrams for Hexo.

在 Hexo 中识别并生成由 mermaid 编写的图表。

可以通过修改 Hexo 或其他主题的重写博客 CSS 框架文件，改变渲染出的图表样式。

例如，在 Icarus 主题中，修改 icarus/source/css/style.styl 文件，添加以下代码实现图表背景透明：
```
.mermaid {background: transparent;}
```
其他配置参考：https://github.com/knsv/merma…
hexo-tag-plantuml

hexo-tag-plantuml is a tag plugin for Hexo. It can work with plantuml to draw uml.

在 Hexo 中绘制 uml 图。
hexo-filter-flowchart

Generate flowchart diagrams for Hexo.

在 Hexo 中识别并生成由 flow 编写的图表。

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框 (是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框 (是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

gantt
    dateFormat MM-DD
    title 软件开发甘特图
    section 设计
    需求: done,des1, 01-06,01-08
    原型: active,  des2, 01-09, 3d
    UI 设计: des3, after des2, 5d
    未来任务: des4, after des3, 5d
    section 开发
    学习准备理解需求: crit, done, 01-06,24h
    设计框架: crit, done, after des2, 2d
    开发: crit, active, 3d
    未来任务: crit, 5d
    休息: 2d
    section 测试
    功能测试: active, a1, after des3, 3d
    压力测试: after a1  , 20h
    测试报告: 48h

PlantUML 是一个允许你快速编写一下图表的组件 :

Sequence diagram（时序图）
Usecase diagram
Class diagram（类图）
Activity diagram (here is the legacy syntax)
Component diagram
State diagram
Object diagram
Deployment diagram(BETA)
Timing diagram(BETA)

Hexo 安装 hexo-tag-plantuml 插件，便能使其绘制的图表在博客上展示，其原理其实使用的是 PlantUML 提供的在线服务, 只是简单地将标签包裹的代码传给服务器, 获取生成的链接, 生成 img 标签替换原来的代码区域.

plantUML 在线编辑网站

可使用 HTML 标签将其嵌套

{% plantuml %}
title Relationships - Class Diagram

class Dwelling {
  +Int Windows
  +void LockTheDoor()}

class Apartment
class House
class Commune
class Window
class Door

Dwelling <|-down- Apartment: Inheritance
Dwelling <|-down- Commune: Inheritance
Dwelling <|-down- House: Inheritance
Dwelling "1" *-up- "many" Window: Composition
Dwelling "1" *-up- "many" Door: Composition
{% endplantuml %}

在Hexo中使用Markdown绘制图表

标准流程图

使用 mermaid 绘制流程图

使用 flow 绘制流程图

时序图

甘特图（Gantt）

UML 图