Markdown流程图的简单使用

最新推荐文章于 2025-01-09 01:42:43 发布
原创 最新推荐文章于 2025-01-09 01:42:43 发布 · 999 阅读 · 21 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#流程图

流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。

```mermaid
flowchart LR
    id1(开始) --> id2(结束)
```
开始
结束

流程图要素：布局方向、几何图形和连接线段。

布局方向：LR(从左到右)，RL(从右到左)，TB(从上到下)，BT(从下到上)
Left, Right, Top, Bottom

几何图形：两部分，左边表示标识，右边表示文本，如id1(开始)，文本两边标点表示形状

```mermaid
graph TD
    id1[带文本的矩形]
    id2(带文本的圆角矩形)
    id3>带文本的不对称的矩形]
    id4{带文本的菱形}
    id5((带文本的圆形))
```
最低0.47元/天 解锁文章

200万优质内容无限畅学
Markdown 教程之如何在 Markdown 文档中添加流程图、方程式和交互式图形
iCloudEnd的博客
11-18 2894
您是否遇到过想要在 Markdown 文档中包含一些简单图表或方程式的场景？如果这是一次性的事情，你可以做的是使用 Power Point 或在线生成器，将图表保存为图像并将其放在你的文章中。这种方法的缺点是背景颜色可能与您的文章不匹配，并且进行更改非常耗时。Markdown 扩展是第三方软件提供的附加功能，可以丰富 Markdown 文档的内容。我们将讨论三个常用的，您可能会在适当的时候使用它们。Mermaid 是一个基于 javascript 的 markdown 扩展，让您可以使用文本和代码创建图表和
MarkDown流程图概要
weixin_30396699的博客
09-22 116
要素 流程元素定义: 名称=>类型: 显示名称 控制流程定义: 名称1([yes,no],right)->名称2 注意事项 流程元素定义在代码上部, 流程走向定义在代码下部 名称可以取中文 类型为六种: start, end, operation, subroutine, condition, inputoutput 实例 最简单 开始=>start: 开始 结束=&gt...
markdown各种图形用法
mindcarver
09-18 2828
markdown各种图形用法
markdown作图练习
shiawaseli的博客
05-14 574
仅仅是我在作图时的一些练习。
Markdown教程<2> mermaid图形绘制（1）
akp1737的博客
06-25 514
Markdown教程<2> mermaid图形绘制（1） 博客园中的markdown编辑器同时支持mermaid图表引擎与tex公式引擎，可以使用mermaid直接画出流程图，时序图，甘特图等，比较方便，下面介绍一下在markdown中使用mermaid绘制图表 注意：本文包含较多mermaid图表，打开本网页后需要等待一段时间加载完成方可显示图表。可以观看浏览器标题...
Markdown 进阶语法：Mermaid 绘图 (一) - 流程图 (Flowchart)
热门推荐
小嗷犬的博客
07-04 1万+
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
markdown绘制流程图相关代码片段记录
weixin_44317448的博客
02-17 1162
上一个代码示例中，B{“冰箱小不小？”} 这里的描述文字加了引号，是因为其中包含特殊字符（问号），用引号包裹防止出错为节点取名为 A B C 不太合适，如果节点很多时往往容易混淆，不方便后续使用和阅读（编程时命名的重要性）。建议起有意义的名字，除上述带箭头线段 --> 外，还有带箭头虚线线段 -.->、 带箭头加粗线段 ==>、不带箭头线段 —A B C D 这些字符是为节点取的名字，这个名字可以在之后反复利用（在编程里这相当于定义变量）上述 -->是带箭头线段，–>|不小| 是加了描述文字的带箭头线段。
Markdown画流程图案例
最新发布
weixin_45326892的博客
01-09 2057
在Markdown中绘制流程图通常使用Mermaid扩展。Mermaid是一种图表生成工具，可以绘制流程图、序列图、甘特图等。
Markdown支持的几种图表和代码实例（流程图、时序图、甘特图）
garbageSystem的博客
03-29 2789
Markdown支持的几种图表类型。代码实例。 包括： 流程图：指定 mermaid（样式流程图） 或 flow （标准流程图）解析语言 时序图：指定 sequence（标准时序图） 或 mermaid（样式时序图） 解析语言 甘特图：指定 mermaid 解析语言
Markdown学习
asd159357dsa的博客
02-03 311
Markdown学习 标题的语法 “#” + ” “ + ”内容“ ; 字体的语法 左右加一个”*“，即：变斜； 左右加两个”*“，即：加粗； 左右加两个”~“，即：删除； 引用 “>” + ” “ ； 分割线 三个”-“‘； 三个”*“； 图片 ”！“ + ”[名字]“ + “(链接)”； 超链接 ”[名字]“ + “(链接)”； 列表 有序列表 ”数字 “ + ”.“ + " "； 无序列表 ”-“ + ”.“ + " "； 表格 “|” 表示表格竖分割线 “-” 表示表格横分割线 代码 三个”·
【MarkDown】CSDN Markdown之流程图graph&flowchart详解
少莫千华
06-14 6968
流程图（Flowcharts/Graphs）是由节点 (几何形状) 和连接线 (箭头或线条)组成的. `Mermaid`代码定义了节点和连线的编码方式，并支持不同的箭头类型、多向箭头以及子图之间的任意链接。
【Markdown】【mermaid】Mermaid流程图基础语法Flowcharts - Basic Syntax
hmywillstronger的博客
03-21 3950
流程图由节点（几何形状）和边（箭头或线条）组成。Mermaid 代码定义了如何创建节点和边，并支持不同的箭头类型、多方向箭头以及与子图的连接。如果在流程图节点中使用单词 “end”，请将整个单词或其中任何一个字母大写（例如，“End” 或 “END”），或者应用此解决方法。全小写输入 “end” 会导致流程图无法渲染。如果在连接流程图节点时使用字母 “o” 或 “x” 作为第一个字母，请在字母前添加空格或将字母大写（例如，“dev— ops”, “dev—Ops”）。
obsidian中Mermaid语法——流程图（flowchart）
harry0936的博客
12-26 1万+
流程图由节点（几何形状）和边（箭头或线）组成。Mermaid 代码定义了如何创建节点和边，并适应不同的箭头类型、多向箭头以及与子图之间的任何链接。
Markdown 达人必备！轻松几步画出专业流程图
PeterJXL的博客
08-04 1771
流程图，顾名思义，就是表示一个事件或活动的流程的图示。
markdown语法笔记(二)
Android系统攻城狮
12-09 830
markdown是轻文本编辑器，并不像word那么强大，所以画图也是轻量级的，功能并不全。如使用mermaid画图时不能从上往下，同时又从右往左。 推荐markdown编辑软件 -typora mermaid graph（流程图） 节点名不能与关键字同名 使用引号可以避免一些不必要的麻烦，如避免与关键字同名 关键字graph表示一个流程图的开始，同时需要指定该图的方向 图方向 TB，从上到下 TD，从上到下 BT，从下到上 RL，从右到左 LR，从左到右 T = TOP，B..
Markdown中流程图的用法
cheese的博客
01-03 1797
Markdown的原生语法不支持绘制图形，但通过Mermaid扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。Mermaid是一个方便于Markdown文档撰写者通过文本方式生成图形的扩展工具。相比于微软的Visio，它几行文字就可以生成一幅完整且美观的流程图。本节将重点介绍如何通过 Mermaid 绘制「流程图」。
使用markdown画流程图
tm1560000的博客
10-11 4081
在这篇文章中，我将介绍如何在Markdown中使用Mermaid绘制流程图，并对图表进行自定义样式设计。通过使用西安旅游流程为例，详细展示了从基础语法到多分支流程，以及如何为节点添加颜色、边框等样式的具体方法。读者可以学习如何灵活运用Mermaid语法，绘制出个性化且美观的流程图，用于各类技术文档和项目展示。
mermaid flowchart使用指南
Yang的专栏
03-18 3368
mermaid flowchart 使用指南
markdown 流程图
06-13
要在 Markdown 中绘制流程图，可以使用 Mermaid。Mermaid 是一个用 JavaScript 实现的流程图渲染工具，可以方便地在 Markdown 中绘制各种类型的流程图。 下面是一个简单的 Mermaid 流程图示例： ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` 这个示例中，`graph` 表示要绘制一个图，`TD` 表示图的方向是从上到下。`A-->B` 表示从节点 A 到节点 B 有一条箭头，`A-->C` 同理，`B-->D` 和 `C-->D` 表示从节点 B 和 C 都有一条箭头指向节点 D。 如果你想在自己的 Markdown 中使用 Mermaid 绘制流程图，可以参考这个官方教程：[Mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted)。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

梦星辰.

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

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

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

打赏作者

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

抵扣说明：

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

余额充值