轻量流程图语言——Mermaid

最新推荐文章于 2025-05-09 01:16:39 发布
最新推荐文章于 2025-05-09 01:16:39 发布
阅读量1.8k 收藏
点赞数
分类专栏： 学习笔记 文章标签： github markdown javascript
cakeyoga
本文链接：https://blog.csdn.net/weixin_44725869/article/details/111029853
版权

持续更新中，最近更新：2020/12/11

文章目录

哦吼吼，CSDN支持Mermaid了！

1 Mermaid是什么

Mermaid让你可以使用文本和代码制作流程图。它受Markdown语言的启发，基于Javascript开发的制作流程图的轻量化语言，可以帮助你自动生成和修改流程图！
省去逻辑不清就画图的情况以及繁琐的调整过程！

2 了解更多：Github项目&文档地址

项目地址：https://github.com/mermaid-js/mermaid-live-editor
文档地址：https://mermaid-js.github.io/mermaid/#/README

3 快速开始：

3.1 语言逻辑举例

下面便是一段用Mermaid语言编写的流程逻辑。

graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;

3.2 在CSDN编辑器中插入代码块，并指定语言类型

通过在CSDN编辑器中插入代码块并指定语言类型，可以让CSDN编辑器识别为Mermaid，来自动生成流程图。
在这里插入图片描述

3.3 编辑器自动生成diagram流程图
A
B
C
D
工业物联网安全网关 —— 轻量级MQTT-TLS协议栈
qq_42568323的博客
04-18 547
随着工业物联网（IIoT）的迅速发展，设备之间的数据传输、远程监控和控制正越来越依赖于轻量级协议。MQTT作为一种低带宽、低延迟的轻量消息传输协议被广泛应用于工业物联网领域；而TLS（传输层安全协议）则为数据传输提供了可靠的加密保护。工业应用中要求协议栈具有低内存占用、快速响应以及高安全性，这促使我们设计一款“轻量级MQTT-TLS协议栈”，以实现设备间的安全通信并确保数据在互联网络中的传输不被窃取或篡改。
区块链SPV节点轻量级验证实现
qq_42568323的博客
03-08 416
在区块链技术中，全节点需要存储整个区块链数据，对每一笔交易进行验证，这对存储、计算和网络带宽提出了较高要求。相比之下，轻量级节点——也称为SPV（Simplified Payment Verification）节点，仅保存区块头信息，通过验证区块链的Merkle树证明，实现对交易的轻量级验证，从而大幅降低了对计算资源和存储资源的需求。SPV节点因此在移动设备、物联网设备以及其他资源受限环境中具有重要应用价值。
UML图语法和Mermaid语言
飞浪纪元FE的博客
05-30 1964
UML图语法和Mermaid语言MermaidMermaid 介绍Mermaid的好处Mermaid-天然的 Web 友好特性使用 MermaidMermaid支持UML图的设计简介标记块写法第一个示例句法句法-类句法-定义类句法-定义类的成员句法-定义类的成员1句法-定义类的成员2句法-返回值类型句法-泛型句法-访问类型句法-定义关系关系句法-示例关系句法-标签示例关系句法-箭头朝向关系上的基数/多重性对类进行注释注释交互[csdn的markdown不会生效，需专业软件]交互示例1 Mermaid Mer
Mermaid使用教程（绘制各种图）
江月的博客
01-19 1万+
接下来，做一个小小的总结：我们讨论了使用 Mermaid 来生成不同类型的图表。Mermaid 是一个 JavaScript 库，它允许用户使用 Markdown 语法来创建和渲染流程图、序列图、甘特图和 Git 提交历史图等。流程图：使用graph关键字来定义流程图，并通过箭头 (-->) 来表示流程中的步骤和它们之间的关系。序列图：也使用graph关键字，但通常指定方向（如LR表示从左到右）。序列图用于显示对象之间的交互，箭头表示消息传递。甘特图。
mermaid绘图的语法详细
jakeswang的博客
04-22 1776
Mermaid 是一种基于文本的绘图工具，可通过简单的文本描述生成流程图、序列图、甘特图等多种类型的图表。以下是对其常见绘图类型语法的详细介绍：Mermaid 是一种基于文本的图表生成工具，支持多种图表类型（如流程图、序列图、甘特图等）。
【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）
Tuing_的博客
03-30 7766
mermaid是一种解决文字图形转换的方案、本篇作为mermaid教程系列的第一篇，先介绍流程图（flowchart or graph）
新年重磅！ flowchart可视化流程图编程语言发布
欢迎来到最伟大的操作系统官方博客
01-28 1万+
flowchart流程图编程语言是我从事自动编程研究获得的重要成果，也是器普语言编译器开发成功后再上一个台阶，它可以可以理解为器普语言的可视化编程。用ida做静态反汇编分析的时候他会把汇编代码用流程图显示出来，这样汇编代码更容易理解。不过即使是C#语言，进行代码混淆后也很难理解，因为文字含义已经丧失，必须跟踪调试才能理解其代码，甚至很难理解。我在做C#代码还原流程图设计的时候，有些变量如果没有注视，还是很难理解的，因为对业务也不了解，无法对应其意义。然而因为流程图编程语言是中文，我想这种代码理解，几乎不再是
Mermaid语法
冰糖先生
06-10 1万+
文章目录Mermaid8.5版本中的新图表有关8.2版本的特别记录图表流程图顺序图甘特图类图-实验阶段Git图表-实验阶段实体关系图-试验阶段安装CDNNode.js原版文档孪生项目寻求帮助针对参与者安装编译Lint测试发布信任 Mermaid 使用Markdown语法以相同的规则从纯文本生成图标和流程图。 当你说明代码时否曾想简化文档编写并避免使用像visio一样繁杂庞大的工具？ 这就是mermaid产生的原因，一个简单的类Markdown脚本语言，其通过javascript从纯文本中产生图表。 查看m
Mermaid语法大全
weixin_45017098的博客
06-13 6316
​ Mermaid是一个开源的、基于JavaScript的绘图库，它可以用简洁的、人类可读的文本描述和绘制流程图、序列图、甘特图、类图、实例图、状态图和部署图等不同类型的图表。Mermaid的语法简单易懂，支持针对不同类型图表的定制化设置，可以轻松绘制高质量的图表并嵌入到网页、Markdown文档和其它支持HTML的场景之中。此外，它还支持插件和编辑器的集成，使得用户可以更加高效地使用和管理Mermaid图表。Mermaid是一个接近理想状态的图表和流程图的设计工具，是众多开发者和作者的首选。
Mermaid说明
pumpkin84514的博客
09-12 6571
在 Mermaid 中，注释使用%%符号添加。这些注释在生成的图形中不会显示，它们仅用于在 Mermaid 源代码中添加额外的说明或文档。可以根据具体的图类型在适当的位置添加注释，以提高代码的可读性和可维护性。
mermaid 软件流程图
01-17
Mermaid 是一种轻量级的图形描述语言，适用于绘制多种类型的图表，其中包括流程图。为了创建一个清晰易懂的软件流程图，在 Markdown 文件中嵌入 Mermaid 代码块并遵循特定语法即可。 #### 创建基本结构 定义流程图...
自动生成visio格式流程图（vsdx格式）
最新发布
weixin_66391704的博客
05-09 507
利用大模型快速编写制式文档（需归软设）时，快速生成对应的visio格式（.vsdx）流程图
【从零开始大模型开发与微调】AI 人工智能大语言模型 LLM：语言与思维——实践的融合
AI天才研究院
07-04 2907
在人工智能领域，大语言模型（Large Language Models, LLMs）已经取得了令人瞩目的成就。这些模型基于深度学习，通过在大量文本数据上预训练学习语言知识，被广泛应用于各种自然语言处理（NLP）任务，如图像描述、对话系统、翻译、摘要生成等。但这些模型的性能和表现，特别是其对语言和思维的理解，仍存在诸多困惑和疑问。大语言模型（LLMs）：指基于深度学习技术，通过在大量文本数据上预训练学习语言知识，能够理解和生成自然语言的大规模模型。自监督学习。
mermaid常见语法汇总记录（不断更新）
技术札记
08-24 1519
参考：https://mermaid.js.org/syntax/flowchart.html。
如何掌握流程图语言？
weixin_34107955的博客
10-20 187
如何掌握流程图语言？ 2010-10-19 16:30:32 　标签：流程图 语言　　　 [推送到技术圈] 版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://zhangguoxiang.blog.51cto.com/1943431/407677 ...
流程图 - 基本语法
gfxsx的博客
08-08 542
流程图中的每个节点最终都被分配到一个在渲染图中的等级，即一个垂直或水平级别（取决于流程图的方向），这取决于其连接的节点。默认情况下，链接可以跨越任意数量的等级，但您可以通过在链接定义中添加额外的短横线来要求任何链接比其他链接更长。如果在流程图节点中使用单词 "end"，请将整个单词或其中的任意字母大写（例如，"End" 或 "END"），或者使用此解决方法。如果这样做了多次，将使用节点的最后一个找到的文本。JHL 在线编辑代码定义了如何创建节点和边，支持不同类型的箭头，多方向箭头，以及与子图之间的链接。
【MERMAID】UML 统一建模语言 —— 流程图（Flowchart）
おうせき碩の博客
02-08 980
  愿你如阳光，明媚不忧伤。 目録1. UML 概述2. 流程图方向3. 流程图形状3. 流程图箭头链接4. 流程图链接线长度5. 流程图子图6. 流程图CSS样式   1. UML 概述 UML （Unified Modeling Language）统一建模语言，是一种为面向对象系统的产品进行说明、可视化和编制文档的一种标准语言，是非专利的第三代建模和规约语言，独立于任何具体程序设计语言。UML立足于对事物的实体、性质、关系、结构、状态和动态变化过程的全程描述和反映，可以从不同角度
[C语言]描述算法的工具——流程图
热门推荐
m0_61858413的博客
01-05 1万+
他来了！他来了！带着文章走来了！快来看看壮的文章吧！
mermaid基本语法学习
逝无痕——kaidy
09-03 2133
文章目录甘特图流程图序列图统计图 甘特图 示例 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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值