0%

【Hexo插件系列】流程图、时序图、

有些markdown支持流程图、时序图,比如马克飞象

实际上,这部分的渲染并非markdown引擎(后端渲染)做的,而是采用的第三方前端渲染引擎。其原理类似公式渲染引擎mathjax

因此,这种流程图和时序图很容易嵌入到hexo博客中,而且已经有了相关的插件。

流程图

  • 渲染引擎:flowchart.js
  • 相关的hexo插件: hexo-filter-flowchart

时序图

序列图(Sequence Diagram),
亦称为循序图、时序图,是一种UML行为图。描述物件在时间序列中的交叉作用。
序列图会描绘在此情境下有关的物件,以及此物件和其他物件交换讯息的顺序。
序列图一般和待开发系统逻辑视图上,用例的实现有关。序列图有时也称为事件图或事件情境。

序列图中会绘出许多同时存在的不同物件(以垂直线表示,线的开始及结束为生命线,表示物件的产生及结束),
而物件之间横向的箭头,表示物件之间交换的讯息,会以发生的先后顺序来排列。因此可以用图形的方式,
简单说明用例在执行时的情形。

  • 渲染引擎: js-sequence-diagrams
  • 相关的hexo插件: hexo-filter-sequence

提示: 想了解更多,请查看 流程图 语法以及时序图语法

类图

类图(class diagram)是软件工程的一种UML静态结构图,
该图描述了系统的类集合,类的属性和类之间的关系。

类图是面向对象式的建模。他们一般都被用于概念建模(conceptual modelling)的系统分类的应用程序,并可将模型建模转译成代码。

提示: 了解更多 https://gojs.net/latest/samples/index.html

  • planttext.com 可以导出SVG
  • gojs.net 用的canvas