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编写的图表。

标准流程图

使用mermaid绘制流程图

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

使用flow绘制流程图

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

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

UML图

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 Diagramclass Dwelling {  +Int Windows  +void LockTheDoor()}class Apartmentclass Houseclass Communeclass Windowclass DoorDwelling <|-down- Apartment: InheritanceDwelling <|-down- Commune: InheritanceDwelling <|-down- House: InheritanceDwelling "1" *-up- "many" Window: CompositionDwelling "1" *-up- "many" Door: Composition{% endplantuml %}