程序员/运维绘图工具---Mermaid

于 2025-04-12 12:44:42 发布
阅读量457 收藏
点赞数 4
分类专栏： Artificial Intelligence 文章标签： 信息可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43366437/article/details/147163088
版权

效果

在这里插入图片描述

在这里插入图片描述

介绍

Mermaid 是一种基于文本的图表生成工具，通过类似 Markdown 的简洁语法快速创建流程图、甘特图、类图等各类专业图表

应用场景

程序员绘图
系统架构图&代码逻辑可视化
项目管理图
数据可视化
AI辅助生成：LLM生成mermaid代码然后去渲染成可视化图，
可嵌入markdown，notion，confluence

使用方法

语法中文网址：https://mermaid.nodejs.cn/intro/
在线编辑器：https://mermaid-live.nodejs.cn

绘图工具（Mermaid）
weixin_43156294的博客
09-07 1650
Mermaid 是一个用于绘制流程图、时序图、甘特图等的开源工具。它使用类似 Markdown 的语法进行图表描述，可以在网页中直接使用，也可以通过命令行工具生成图像。Mermaid 支持与多种文档平台和代码托管平台集成，如 GitHub、GitLab 等。在项目文档编写、技术博客创作等场景中非常有用。例如，可以在项目的 README 文件中使用 Mermaid 绘制流程图来介绍项目的工作流程，或者在技术博客中使用 Mermaid 绘制时序图来解释复杂的交互过程。
Mermaid介绍（一种基于文本的图表和可视化工具，可以通过代码生成流程图、序列图、甘特图、类图等图表）
Dontla的博客
01-21 4424
是一种基于文本的图表和可视化工具，可以通过简单的代码来生成流程图、序列图、甘特图、类图等各种类型的图表。它的目标是让用户能够以一种简洁的方式，快速创建和分享可视化的内容，尤其适用于需要快速迭代和更新的文档。总的来说，Mermaid 适用于快速创建文档中嵌入的图表，特别是在开发、技术文档中，非常受欢迎。这个序列图展示了Alice和Bob之间的对话，帮助理解它们之间的交互。上面的代码会生成一个简单的流程图，显示从“开始”到“结束”的步骤。通过简单的语法即可生成可视化图表，降低了图表设计的复杂度。
deepseek+mermaid【自动生成流程图】
最新发布
2301_76682353的博客
03-01 5623
一般就是缺少双引号“”，也可以再丢给deepseek，让她给你加上再。丢给deepseek代码，或题目要求。注意若未生成，可能是代码存在错误。生成mermaid代码。
Mermaid 入门
Asa12138的博客
03-04 1万+
Mermaid是一个基于 JavaScript 的图表绘制工具，可渲染 Markdown启发的文本定义以动态创建和修改图表，允许使用文本和代码创建图表和可视化。
Mermaid—优雅而美丽
生活不易，喵喵叹气
12-04 2889
Mermaid ❇️点此文章参考 Mermaid 官方文档 ⭐什么是 Mermaid? 先别着急，我们通过一组图片展示 Mermaid 的魅力 #mermaid-svg-CJ9VhZzSUK47hx9E .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-CJ9VhZzSUK47hx9E .label text{fi
Mermaid画图教程（一）
weixin_44360592的博客
11-06 8883
文章目录References流程图-Flowchart流程图方向图形形状及连接方式自定义风格使用关键字style声明成一个类多次使用/子图绑定事件饼图-pie顺序图-sequenceDiagram类图-class diagrams类之间的关系类注释状态图-State diagrams一个例子看所有并发实体关系图用户旅程图甘特图 References mermiad画图例子 流程图-Flowchart语法说明 顺序图-Sequence diagrams语法说明 类图-Class diagrams语法说明 状态
mermaid大全（语法、流程图、时序图、甘特图、饼图、用户旅行图、类图）
Le0v1n 的博客
01-12 8358
语法、流程图、时序图、甘特图、饼图、用户旅行图、类图
【拓展】图的渲染工具-Mermaid
2301_79470762的博客
11-13 599
Mermaid 是一个基于 JavaScript 的图表和图表工具，可呈现受 Markdown 启发的文本定义以动态创建和修改图表。如果你熟悉 Markdown，那么学习 Mermaid 的语法应该没有问题，仅用简单的语句表达实现图的渲染。Mermaid官方网站还提供了官方在线绘图渲染器。
Mermaid语法
冰糖先生
06-10 1万+
文章目录Mermaid8.5版本中的新图表有关8.2版本的特别记录图表流程图顺序图甘特图类图-实验阶段Git图表-实验阶段实体关系图-试验阶段安装CDNNode.js原版文档孪生项目寻求帮助针对参与者安装编译Lint测试发布信任 Mermaid 使用Markdown语法以相同的规则从纯文本生成图标和流程图。 当你说明代码时否曾想简化文档编写并避免使用像visio一样繁杂庞大的工具？ 这就是mermaid产生的原因，一个简单的类Markdown脚本语言，其通过javascript从纯文本中产生图表。 查看m
Mermaid画图教程（二）
weixin_44360592的博客
11-07 1970
文章目录References状态图-State diagrams一个例子看所有并发实体关系图用户旅程图甘特图 References mermiad教程 状态图-State diagrams语法说明 实体关系图-Entity Relationship Diagrams语法说明 用户旅程图-User Journey Diagram语法说明 甘特图-Gantt语法说明 mermaid在线作图工具-可保存为图片 Mermaid画图教程（一） 状态图-State diagrams 状态图是计算机科学及相关领域中用于描
Mermaid 实用教程
热门推荐
平头
03-04 10万+
Mermaid 实用教程 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。 之前用过 PlantUML，但是发现这个东西的实现原理是生成 UML 的图片后上传服务端，每次再从服务端读取，因此觉得不够鲁棒，隐私性也不好，因而弃用。 Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段...
Mermaid画流程图、序列图、饼图、甘特图(实例讲解)
ixiaoyang的专栏
10-22 4796
本文将介绍如何学习使用Mermaid画图。传统的可视化绘图工具，每次使用都要以图片的形式进行编辑，不便于微调，在不同应用之间切换也比较麻烦。Mermaid语法简单，改动较小，绘图更高效，更适合程序员使用。下面使用实例展示一下流程图、序列图、饼图、甘特图的绘图过程。
Mermaid官方简介（DeepSeek生成式）
chajinglong的专栏
02-20 4162
让复杂逻辑跃然"码"上——Mermaid 2025全新进化登场！‌ 你是否厌倦了在拖拽式图表工具中反复调整线条、对齐框线、导出失真？ ✨ ‌一行代码生成专业图表，纯文本秒变可视化神器‌——这就是全球300万开发者选择的Mermaid！ ▌‌为什么选择Mermaid？‌ ✅ 用写代码的方式画图：流程图/时序图/类图等15+图表类型，Markdown式语法5分钟上手 ✅ 无缝嵌入文档体系：Git版本可控、跨平台渲染、实时协作编辑 ✅ 2025全新AI辅助模式：智能语法补全 + 交互式预览，开发文档效率提升70
Mermaid 详解与实践
Jiuri的博客
01-01 5846
Mermaid 是一种基于文本的图表绘制语言，它巧妙地融合在 Markdown 文档里，让使用者无需复杂的图形编辑软件，仅靠敲代码就能生成专业美观的各类图表。这一特性使得它在技术写作、项目文档、知识分享等领域迅速走红，为可视化表达流程、架构、时间安排等信息提供了高效途径。官网地址 https://mermaid.nodejs.cn/intro/。
mermaid学习笔记
qq_26661735的博客
10-29 1561
这不是完整的笔记。 因为想画甘特图，但是又不是很想使用鼠标，所以我找到了mermaid。 官网和相关参考资料： mermaid官网 Yarn中文文档 npm安装Yarn_简书 NPM与YARN安装与配置_CSDN Mermaid Live Editor mermaid工具_CSDN 安装 我直接使用官网给的安装教程，也就是使用Node.js： yarn add mermaid 安装Nod...
使用 Mermaid 创建流程图,序列图,甘特图
宁子希的博客
02-15 2388
Mermaid 是一个功能强大且易于使用的工具，用于创建各种类型的图表。无论是流程图、序列图还是甘特图，Mermaid 的简洁语法都能够让你轻松地表达你的想法和数据。通过简单的 HTML 引入和初始化，你就可以在你的网页或应用程序中开始使用 Mermaid。更加详细的教程可以查看官方文档。
Mermaid使用教程（绘制各种图）
江月的博客
01-19 1万+
接下来，做一个小小的总结：我们讨论了使用 Mermaid 来生成不同类型的图表。Mermaid 是一个 JavaScript 库，它允许用户使用 Markdown 语法来创建和渲染流程图、序列图、甘特图和 Git 提交历史图等。流程图：使用graph关键字来定义流程图，并通过箭头 (-->) 来表示流程中的步骤和它们之间的关系。序列图：也使用graph关键字，但通常指定方向（如LR表示从左到右）。序列图用于显示对象之间的交互，箭头表示消息传递。甘特图。
一个强大的作图工具Mermaid入门
Mantou023的博客
12-05 7175
参考网站:https://mermaid.live/edit 在线编辑器https://mermaid.js.org/intro/ 官网。
Markdown mermaid种草(1)_ mermaid简介
耳东小白的小笔记本儿
01-26 971
一款简化程序员文档写作的神器，一款可以帮程序员提升工作效率的神器，耳东小白倾情推荐，请接受种草！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值