@hanfy/plugin-mermaid

mermaid 插件 (支持 markdown 语法生成 mermaid 图表)

安装

$ yarn add @hanfy/plugin-mermaid

添加到引擎

import Engine, { EngineInterface } from '@hanfy/engine';
import Mermaid , { MermaidComponent } from '@hanfy/plugin-mermaid';

new Engine(...,{ plugins:[Mermaid] , cards:[MermaidComponent]})

语法

	mermaid 语法（目前支持流程图、时序图、饼图、甘特图、gitGraph、erDiagram、journey、stateDiagram）

ps: 语法参考： 1、https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNptjzsOwjAQRK-ybEtyARdBSBSEljbNypmQSP6AYwtFiLtjB-jSjWbfW2lerH0PVtw5ohmPBKdxmuQWxJaK6Ggmjbpp9hc_OkVnGOOp5IpG_yQJoMWnwyb8xbS4gtAICWTxQ8utzmi9Ovnx9LUraldjpbO228ZbGgBDtwCJO67YIliZ-rzkVYSO4wiLjlWOPQZJJnZ55DujkqK_Lk6ziiGh4nTvJf5HsxrEzHh_AOMAWgk

2、https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference

	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!

命令

// 可携带参数，第二个mermaid语法
engine.command.execute(
	'mermaid',
	`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!`,
);