markdown mermaid状态图】的更多相关文章

状态图 状态图是一种用于计算机科学和相关领域描述系统行为的图.状态图要求描述的系统由有限数量的状态组成. 语法: stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving:push Moving --> Still:摩擦 Moving --> Crash:速度过快 Crash --> [*] stateDiagram-v2 [*] --> Still Still --> [*] Still --…
Mermaid 是一个用于画流程图.状态图.时序图.甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中. 之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用. Mermaid 作为一个使用 JS 渲染的库,生成的不是一个"图片",而是一段 HTML 代码,因此安全许多. 接下来介绍 Mermaid 的流程图及序列图的语法,也就是大家在工作中常使用的图表. 官…
序列图(时序图) 序列图是一种交互图,它显示了进程如何相互操作以及按什么顺序操作. sequenceDiagram participant l as 大灰狼 participant y as 小羊 l->>y:小坏蛋,弄脏我喝的水 y->>l:狼先生,你在上游,我在下游 l->>y:听说去年你说我的坏话 y->>l:去年我还没出生呢 l->>y:不是你也是你爸爸,说着就扑上去 %% left or right note left of l:对于坏…
流程图 所有流程图都由节点.几何图像.箭头或线条组成. mermaid代码定义了这些节点和边的制作和交互方式.可以有不同的箭头类型.多向箭头以及与子图的连接. 节点 节点 flowchart LR id flowchart LR id 带文字的节点 可以在框中设置与id不同的文本.如果多次这样做,将使用的节点的最后一个文本.另外,如果稍后为节点定义边,则可以省略文本定义.之前定义的将在呈现框时使用. flowchart LR node[id text] flowchart LR node[id…
在 Newbe.ObjectVistor 0.3 版本中我们非常兴奋的引入了一个紧张刺激的新特性:使用状态图来生成任意给定的 FluentAPI 设计. 开篇摘要 在非常多优秀的框架中都存在一部分 FluentAPI 的设计.这种 API 设计更加符合人类自言语言描述.使得代码更加具备可读性. 在 Newbe.ObjectVistor 0.3 版本中,我们设计引入了一种使用状态图来自动生成 FluentAPI 代码的机制.极大了简化了 FluentAPI 实现所需要的脑力劳动. 本篇我们将通过一…
Markown语法简单,用来写文档是个不错的选择. 但是Markdown 语法并不直接支持画图,当然方法还是有的. 本人用的Markdown编辑器为vscode,在里面直接安装merdaid插件即可使用. 最近在学习使用携程开源框架Apollo,就以该框架的一些流程图介绍merdaid的使用:先看几个例子 1.基础模型 ```mermaid graph LR; Portal-->|发布/更新配置|Apollo配置中心; Apollo配置中心-->|实时推送|App; App-->|实时查…
作者:黄永刚 mermaid简介 当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样. mermaid解决这个痛点,这是一个类似markdown语法的脚本语言,通过JavaScript实现图表的生成. 先来看个例子: 1.流程图(flowchart) graph LR; A-->B; A-->C; B-->D; C-->D; 生成的图表如下所示: 2. 时序图(sequence diagram)…
Markdown教程<2> mermaid图形绘制(1) 博客园中的markdown编辑器同时支持mermaid图表引擎与tex公式引擎,可以使用mermaid直接画出流程图,时序图,甘特图等,比较方便,下面介绍一下在markdown中使用mermaid绘制图表 注意:本文包含较多mermaid图表,打开本网页后需要等待一段时间加载完成方可显示图表.可以观看浏览器标题栏,直至本网页不处于加载状态(转圈圈)或者图表已经显示为止. 1. 流程图 图 使用graph来声明一张新的图以及图的绘制方向,…
文档 https://mermaidjs.github.io/#/ cdn https://www.bootcdn.cn/mermaid/ 在线编辑 https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0t…
简介 目前博客园支持mermaid的graph,subgraph,sequenceDiagram,gantt,classDiagram mermaid(美人鱼), 是一个类似markdown,用文本语法来描述文档图形的工具.mermaid语法包含在博客园markdown中. 注释为: %% 注释 插入为:(以下的例如只列举代码) ```mermaid 代码 ``` 或 <body> <div class="mermaid"> 代码 </div> &l…