mermaid语法汇总

已于 2023-03-29 15:43:38 修改
阅读量545 收藏 4
点赞数 2
文章标签： css 前端
于 2023-03-29 15:02:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FHLKJJLDMW/article/details/129837172
版权

 mermaid中文翻译为美人鱼，是一种基于 JavaScript 的绘图和制图工具，可呈现受 Markdown 启发的文本定义以动态创建和修改图表。

官网地址 

在markdown语法中，使用 ~~~mermaid 标记来开始一段可视化图表

 流程图

关键字: graph

方向标记 

默认从上到下

TB/TD -top bottom/Top-Down   表示画一张自上而下的图
BT    -bottom top            表示画一张自下而上的图
RL    -right left            表示画一张自右向左的图
LR    -left right            表示画一张自左向右的图

图形标记

不使用图形则会直接显示文本

[]   表示方形文本框
{}   表示菱形文本框
()   表示圆角方形文本框
(()) 表示圆形文本框

连线标记

连接线重复多个 - 或者 = 能增加线的长度

--   实线不带箭头   示例: A -- B
-->  实线带箭头     示例: A  -- B
-.-  虚线不带箭头   示例: A -.- B
-.-> 虚线带箭头     示例: A -.-> B
===  粗线不带箭头   示例: A === B
==>  粗线带箭头     示例: A ==> B

 

 

skrmoren
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mermaid-diagrams:使用美人鱼语法在 wiki 页面中启用序列图的扩展
08-03
美人鱼图 一个简单的 chrome 扩展，用于在 github、bitbucket 和 Azure DevOps 页面中添加对语法的支持。 例如，将此添加到 github 中的任何 wiki 页面或 Markdown 文件 示例 1 sequenceDiagram A->> B: Query B->> C: Forward query Note right of C: Thinking... C->> B: Response B->> A: Forward response 示例 2 sequenceDiagram A->> B: Query B B->> C: Forward query B Note right of C: Thinking of B... C->> B: Response of B B->> A: Forward re
mermaid-demo
10-30
- 首先需要引入Mermaid库的JavaScript文件，然后在HTML中使用`<script>`标签定义Mermaid语法，并调用`mermaid.init()`启动渲染。 - 示例： ```html <div class="mermaid"> graph TD; A[开始] --> B(处理); B ...
mermaid 语法
weixin_30846599的博客
05-09 797
a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } a:hover { outline: 0; } a:active { outline: 0; } a:hover { color: #005580 !important; t...
Mermaid基础语法(一)
栗少的博客
11-30 1555
流程图-基本语法 Graph graph用于定义流程局节点的走线方向； T D或者TB可以让流程图从上往下走。 ```mermaid graph T D Start --> Stop ``` Start Stop LR 从左到右 graph LR Start --> Stop Start Stop 流程图方向定义语法： TB从上到下 T D 从上到下(与TB相同) BT 从下到上 RL 从右到左 LR 从左到右 No Des&Sh
Mermaid语法
热门推荐
冰糖先生
06-10 1万+
文章目录Mermaid8.5版本中的新图表有关8.2版本的特别记录图表流程图顺序图甘特图类图-实验阶段Git图表-实验阶段实体关系图-试验阶段安装CDNNode.js原版文档孪生项目寻求帮助针对参与者安装编译Lint测试发布信任 Mermaid 使用Markdown语法以相同的规则从纯文本生成图标和流程图。 当你说明代码时否曾想简化文档编写并避免使用像visio一样繁杂庞大的工具？ 这就是mermaid产生的原因，一个简单的类Markdown脚本语言，其通过javascript从纯文本中产生图表。 查看m
mermaid语法
由纪的博客
06-15 226
方向 graph TB表示图的走向是从上到下 形状 graph TB 默认方形 id1[方形] id2(圆边矩形) id3([体育场形]) id4[[子程序形]] id5[(圆柱形)] id6((圆形)) graph id1{菱形} id2{{六角形}} ...
小书匠语法说明之mermaid1
08-04
小书匠语法说明之mermaid1主要介绍了如何使用Mermaid语法在小书匠编辑器中创建各种图表，如流程图、序列图、甘特图等。Mermaid是一种强大的文本到图表的工具，允许用户通过纯文本的方式绘制图表，极大地提高了绘图...
自己总结的一些Markdown基础语法
06-18
prince不支持流程图(可以使用mermaid)，首页带水印;chrome pdf 代码框没有样式，不支持强调标记;markdown pdf 不支持流程图、脚注、\。最好是open in browser,然后点击打印，另存为pdf，页眉页脚样式没修改前，最好...
Python库 | markdown-mermaid-to-images-0.1.2.tar.gz
03-06
例如，以下Mermaid语法创建了一个简单的流程图： ```mermaid graph TD; A[Start] --> B{Decision}; B -->|Yes| C[Result1]; B -->|No| D[Result2]; C --> E[End]; D --> E; ``` **Python库 markdown-mermaid-to-...
typora-blog：:mermaid_light_skin_tone:用Typora写博客！
02-04
在Typora中，通过在代码块中使用Mermaid语法，可以生成可视化图表。例如： ```mermaid graph TD; A[开始] --> B{条件判断}; B -- 是 --> C[执行操作]; B -- 否 --> D[结束]; C --> E[检查结果]; E -- 结果OK --...
mermaid基本语法学习
逝无痕——kaidy
09-03 1825
文章目录甘特图流程图序列图统计图 甘特图 示例 Mon 06Mon 13Mon 20Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser F
Mermaid语法大全
weixin_45017098的博客
06-13 3393
​ Mermaid是一个开源的、基于JavaScript的绘图库，它可以用简洁的、人类可读的文本描述和绘制流程图、序列图、甘特图、类图、实例图、状态图和部署图等不同类型的图表。Mermaid的语法简单易懂，支持针对不同类型图表的定制化设置，可以轻松绘制高质量的图表并嵌入到网页、Markdown文档和其它支持HTML的场景之中。此外，它还支持插件和编辑器的集成，使得用户可以更加高效地使用和管理Mermaid图表。Mermaid是一个接近理想状态的图表和流程图的设计工具，是众多开发者和作者的首选。
Mermaid语法使用
weixin_42202992的博客
08-09 604
Mermaid语法使用
Mermaid 语法 转载
qq_37232457的博客
12-16 136
mermaid 语法转载, 一定要学习
mermaid语法演示
路边小M's Blog
03-23 2923
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Mermaid语法1-概述
Neptuneyut的博客
02-23 859
文章目录Mermaid能做什么？快速预览Mermaid可以绘制的图FlowchartGantt diagramPie chartSequence diagramClass diagramGit graph - exclamation experimentalEntity Relationship Diagram - exclamation experimentalUser Journey Diagram参考 Mermaid能做什么？ 想要接触Mermaid的人多半是从Markdown走过来的，Markdow
mermaid常见语法汇总记录（不断更新）
技术札记
08-24 772
参考：https://mermaid.js.org/syntax/flowchart.html。
Mermaid流程图基本语法
ixiaoyang的专栏
10-19 1286
mermaid流程图基本语法讲解
【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）
Tuing_的博客
03-30 5290
mermaid是一种解决文字图形转换的方案、本篇作为mermaid教程系列的第一篇，先介绍流程图（flowchart or graph）
Mermaid 语法
最新发布
06-25
1. 表达式：以 ````mermaid` 或 ````mermaid diagram` 开始，以 ````` 结束的代码块就是 Mermaid 语法的区域。 2. 图形类型：例如，`sequenceDiagram` 用于序列图，`graph TD` 或 `graph LR` 用于定义流程图的布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值