Mermaid 编写流程图

最新推荐文章于 2025-06-27 17:52:08 发布
原创 最新推荐文章于 2025-06-27 17:52:08 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#编辑器 #javascript

Mermaid 是一个基于 JavaScript 的图表绘制工具，允许通过文本和代码创建图表，简化复杂图的维护。它可以渲染多种图表，如流程图、时序图、甘特图等。在 Typora 中使用 Mermaid，可以方便地插入和编辑图表，提高绘图效率。通过定义节点、箭头线、消息线和各种特殊语法，用户可以快速构建流程图，包括循环和判断结构。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Mermaid 编写流程图教程

Mermaid 允许使用文本和代码表示图表，简化了复杂图的维护。它是一个基于javascript的图表绘制工具，从时间成本上大大的解决了画图的时间，而这个图表可呈现Markdown启发的文本定义，可以动态创建和修改图表内容。

Mermaid可以渲染的图表

Mermaid可以画，流程图，时序图，甘特图，类图，实体关系图等等，接下来我们来具体看看如何操作，在操作之前我们需要先下载一个工具：Typora。
以下是Typora工具的打开后的界面如下：
在这里插入图片描述
工具的主题颜色皮肤可以点–主题选项选择如图：
在这里插入图片描述
话不多说我们直奔主题

  1. 流程图
    首先鼠标右键选择-》插入-》代码块
    在这里插入图片描述
    接着选择语言输入：mermaid
    在这里插入图片描述
graph TD
最低0.47元/天 解锁文章

200万优质内容无限畅学
DeepSeek进阶应用（一）：结合Mermaid绘图（流程图、时序图、类图、状态图、甘特图、饼图）
Code_流苏：在代码中寻诗意，在实践中觅真知
03-09 5376
纯干货，DeepSeek结合Mermaid绘制各类图（流程图、时序图、类图、状态图、甘特图、饼图）
【Mermaid 离线工具】Mermaid 流程图生成器 - 高清PNG输出，一键生成专业级流程图！
最新发布
kngines
07-24 734
摘要：Mermaid流程图生成器（离线版） Mermaid流程图生成器是一款基于文本驱动的高效绘图工具，支持离线使用，可创建流程图、序列图、甘特图等专业可视化图表。其核心优势在于： 文本语法绘图：通过简洁代码替代传统拖拽操作，支持多类型图表； 离线功能：不依赖网络，适用于移动办公等场景； 五步操作：代码输入-渲染预览-视图调整-高清导出（PNG/SVG）-代码管理； 应用广泛：覆盖软件开发、项目管理、教育培训等多个领域。 该工具采用直观的界面设计，配备示例模板和实时预览功能，显著提升可视化工作效率。
高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
RenGJ010617的博客
01-07 8044
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具，可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外，mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。
mermaid 之 (Flowchart) 流程图
HaSaKing的博客
04-24 7446
官网文档。
Mermaid保姆级教程：文本秒变流程图/甘特图，开发文档效率翻倍
xiami_world的博客
06-27 1453
本文将带你深入理解Mermaid的核心价值，并逐步解析其基础语法，助你快速实现“零代码”专业绘图。
mermaid 流程图
GIS探索之路
12-24 649
流程图 流程图1 #mermaid-svg-zsm5NKyw9lzancW4 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-zsm5NKyw9lzancW4 .label text{fill:#333}#mermaid-svg-zsm5NKyw9lzancW4 .node rect,#mermaid-svg-z
mermaid绘制流程图
wlh2067的博客
03-16 2896
meimaid绘制流程图 平时撰写公众号、知乎、CSDN等使用Typora Typora是一款Markdown编辑器，支持meimaid，十分方便 下面来学一下流程图语法： 首先要有以下格式 ```mermaid 召唤mermaid编辑栏 开始写代码 节点文本框 graph LR; id #mermaid-svg-yCfSMf6coClPfYmO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}
Mermaid流程图
拱卒的博客
08-10 5179
官网 Github 项目地址 一、介绍 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中 二、流程图基础 1、流程图符号和含义 Mermaid 的流程图的图形含义使用象形的表达形式，非常类似中国象形，理解起来也不难，比如矩形 [],圆角矩形(),圆形(()) 图形 符号含义 圆角矩形 表示开始和结束 id(“文字”) 矩形 表示过程环节 id["文字"] 单向箭头线段 表示流程进行方向
Markdown 使用技巧之利用 Mermaid 进行绘制流程图
独泪了无痕
05-30 4834
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。
【论文技巧】Mermaid VSCode插件制作流程图保存方法
qq_41767061的博客
02-18 7209
插流程图快点。
MERMAID流程图
qq_43600632的博客
08-07 409
MERMAID流程图MERMAID流程图图形画法连接线画法字符画法子图设计 MERMAID流程图 图形画法 此处存在代码块，请查看代码： #mermaid-svg-fGsVa7xLvT2srPXG .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-fGsVa7xLvT2srPXG .label text{fill:
mermaid之流程图
小妖的博客
07-10 1万+
mermaid中的流程图 1. 图形 图形布局分四个方向，上下、下上、左右、右左，分别是TB(TD)/BT(DT)/RL/LR，字母必须为大写，具体代码如下： ```mermaid graph TD; 开始 --> 结束; 开始结束 2. 节点和形状 带文字节点：为节点设置一个id，id后括号中写该节点内容 graph TD; id1[这是一个节点] 这是一个节点 圆边节点：...
Mermaid画流程图、序列图、饼图、甘特图(实例讲解)
ixiaoyang的专栏
10-22 5278
本文将介绍如何学习使用Mermaid画图。传统的可视化绘图工具，每次使用都要以图片的形式进行编辑，不便于微调，在不同应用之间切换也比较麻烦。Mermaid语法简单，改动较小，绘图更高效，更适合程序员使用。下面使用实例展示一下流程图、序列图、饼图、甘特图的绘图过程。
mermaid基本流程图
健身房
07-28 2013
  mermaid画出流程图的基本语法如下： graph LR A --> B A --> C B --> D C --> D 结果如下： #mermaid-svg-NwghdVVYPqWvUg9a .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Nwg
Markdown(五)——绘图工具mermaid之流程图Flowchart
qq_36749906的博客
08-12 4635
前言：更新下mermaid画图的流程图。 流程图 1. 流程图流向   在最初设计流程图的时候，首先要确定流程图的总体流向，流程图流动方向有如下几种: 方向 标记 备注 上=>下 TB Top to Bottom 上=>下 BT Bottom to Top 左=>右 LR Left to Right 右=>左 RL Right to Left   表示流向时，在最开始用关键字graph+ 上述方向标记符确定流程图流向。 从上往下 TB grap
Markdown里面使用mermaid画流程图（基础）
热门推荐
背对星星和月亮
09-21 6万+
Markdown里面使用mermaid画流程图（基础）之前有介绍如何在Markdown里面使用flowchart.js插件支持画流程图。Markdown编辑器Typora同样支持使用mermaid插件来进行画图。Graph关键字graph表示一个流程图的开始，同时需要指定该图的方向。例如 graph LR ​ A –> B 表示如下一个从左到右的图。流程图的定义仅由graph开始，但是方向
Mermaid流程图完全指南
exlink2012的专栏
10-22 5001
基本节点：id1[这是一个节点]节点形状：[文本](文本)((文本)){文本}{{文本}}Mermaid流程图是一个简单但强大的工具，通过简单的文本就能创建专业的流程图。
mermaid代码生成流程图
06-10
### 如何使用 Mermaid 编写流程图代码 Mermaid 是一种基于文本的图表绘制工具，可以通过简单的语法生成多种类型的图表。以下是关于如何使用 Mermaid 编写流程图代码的详细说明。 #### 1. 声明流程图类型 Mermaid 支持通过 `graph` 或 `flowchart` 声明流程图类型[^1]。例如： ```mermaid graph TD; ``` 上述代码声明了一个方向为自顶向下的流程图（TD 表示 Top to Down）。如果需要从左到右排列，则可以使用 `LR`（Left to Right）[^3]。 #### 2. 定义节点和连接 在 Mermaid 中，节点可以通过简单的 ID 和描述定义，连接则通过箭头表示。例如： ```mermaid graph TD; A[开始] --> B{条件判断}; B -- 是 --> C[执行操作]; B -- 否 --> D[结束]; ``` 上述代码定义了四个节点：`A`、`B`、`C` 和 `D`，并通过箭头连接它们。`B` 是一个决策节点，带有两个分支输出[^3]。 #### 3. 节点类型 Mermaid 支持多种节点类型，包括普通节点、决策节点、子流程节点等。以下是一些常见的节点类型： - 普通节点：`A[普通节点]` - 决策节点：`B{决策节点}` - 子流程节点：`C((子流程节点))` - 圆形节点：`D((圆形节点))` 例如： ```mermaid graph TD; A[开始] --> B{条件判断}; B -- 是 --> C((子流程)); B -- 否 --> D((结束)); ``` #### 4. 箭头样式 Mermaid 提供了多种箭头样式来表示不同的关系[^4]。例如： - 实线箭头：`--->` - 虚线箭头：`-.->` - 带文字的箭头：`-- 文字 -->` - 粗线箭头：`== 文字 ==>` 例如： ```mermaid graph TD; A[开始] -->|条件满足| B[执行操作]; B -.-> C[备用方案]; ``` #### 5. 在线工具与渲染 如果需要测试或渲染 Mermaid 代码，可以使用在线工具如 Mermaid Live Editor[^5]。将代码粘贴到编辑器中即可实时查看渲染效果。 --- ### 示例代码 以下是一个完整的 Mermaid 流程图代码示例： ```mermaid graph TD; A[开始] --> B{是否登录}; B -- 是 --> C[进入系统]; B -- 否 --> D[跳转到登录页]; C --> E[完成操作]; D --> F[输入用户名密码]; F --> G{验证成功?}; G -- 是 --> C; G -- 否 --> H[重新输入]; ``` ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码峡谷你才哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值