中文Mermaid是一款流程图、时序图、关系图等图表的在线画图与编译、绘图和实时编辑器,它同时也是在线流程图制作与生成工具,并能导出图片,且支持转换Mermaid代码变成图表。
T、B、L、T分别是Top/Bottom/Left/Right的缩写 id为节点的唯一标识,类似于变量。括号内为节点要显示的文字 单向箭头为流程进行方向。支持虚线与实线,有箭头与无箭头、有文字与无文字。分别是---、-.-、 -->、-.->、--文字-->、-.文字.->、--文字---、-.文字.- 支持子图。如代码、效果图所示。 M...
括号内为节点要显示的文字 单向箭头为流程进行方向。支持虚线与实线,有箭头与无箭头、有文字与无文字。分别是---、-.-、 -->、-.->、--文字-->、-.文字.->、--文字---、-.文字.- 支持子图。如代码、效果图所示。 Mermaid效果图如下: 序列图 序列图共有5个部分,分别是:参与者、消息线、循环、选择...
1、将你要画的流程图指定在大模型中生成,让大模型输出Mermaid 语法的流程图。 2、在线编辑mermaid图 https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNpFj0FrwzAMhf-K0GmD5g_kMGiTrZfCBu0t7kEkSmxWy8axGSXJf5-6MXaTnr73eFqwDwNjjVOiaOHSGtl3jU1uzp7mK1TVy3rkDD4I31c4PB0DzDbE6GR6NnJ4ANAsp...
流程图 代码如下: graph TB; subgraph 分情况 A(开始)-->B{判断} end B--第一种情况-->C[第一种方案] B--第二种情况-->D[第二种方案] B--第三种情况-->F{第三种方案} subgraph 分种类 F-.第1个.->J((测试圆形)) F-.第2个.->H>右向旗帜形] end H---I(测试完毕) C--票数100-...
Mermaid 支持多种图表类型,包括流程图(Flowchart)、序列图(Sequence Diagram)、甘特图(Gantt Diagram)、类图(Class Diagram)、状态图(State Diagram)等。这些图表广泛应用于软件设计、项目管理、系统建模等领域。例如,开发者可以使用流程图来描述一个算法的执行流程,或者用序列图来展示系统组件间的交互。
🖼️ 然后,告诉GPT不要直接给图,而是给出Mermaid代码。接着,在Mermaid在线网站上粘贴这些代码,你可以轻松生成各种格式的图片。📝 通过这样的方式,你可以轻松地制作出既美观又专业的Mermaid流程图。快来试试吧!💡 小贴士:记得在GPTs中输入正确的指令,并确保在Mermaid在线网站上正确粘贴代码哦!
流程图中的每个节点最终在呈现图中分配到一个等级,即垂直或横向水平(根据流程图的定向),基于与其链接的节点。默认情况下,链接可以跨越任意数量的等级,但您可以要求任何链接比其他链接更长,通过在链接定义中添加额外的破折号。 在下面的例子中,链接从节点\_B\_到节点\_E\_添加了两个额外的破折号,因此它跨度比常规...
流程图 代码如下: graphTB;subgraph 分情况A(开始)-->B{判断}endB--第一种情况-->C[第一种方案]B--第二种情况-->D[第二种方案]B--第三种情况-->F{第三种方案}subgraph 分种类F-.第1个.->J((测试圆形))F-.第2个.->H>右向旗帜形]endH---I(测试完毕)C--票数100---I(测试完毕)D--...
在线绘图工具地址：iodraw.com/codechart Mermaid语法简洁，易于调整，相比传统绘图工具更灵活，更便于在不同应用间切换。流程图示例代码，解析：T、B、L、R表示边的顶点，id为节点标识，文字标注在节点内，箭头表示流程方向，支持虚线、实线、带文字等。流程图示例图：序列图包含参与...