Markdown语法-Mermaid和Flowchart流程图

最新推荐文章于 2024-07-10 15:51:30 发布

原创最新推荐文章于 2024-07-10 15:51:30 发布 · 2k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#流程图 #服务器 #linux

Markdown语法专栏收录该内容

6 篇文章

订阅专栏

本文介绍了使用Mermaid和Flowchart在Markdown中创建流程图的方法，展示了如何通过这两种工具设计开始、操作、条件判断和连接节点的流程图示例。

流程图

一、Mermaid流程图
二、Flowchart流程图

一、Mermaid流程图

```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？
st->op->cond
cond(yes)->e
cond(no)->op

二、Flowchart流程图

```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D

$\color{#4285f4}{\mathbf{E}}\color{#ea4335}{\mathbf{N}}\color{#fbbc05}{\mathbf{D}}\color{#4285f4}{\mathbf{!}}$

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RunningCamel

关注关注

13
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

markdown图表语法Mermaid介绍

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

05-25

539

¶Markdown是一种轻量级标记语言，除了编辑文字外，还支持插入图片、表格、公式，它是很流行的一种文档编辑语言，很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用的功能是画流程图，基于Mermaid库来渲染流程图，语法比较简洁，本文将介绍Markdown的Mermaid简单使用方法。Mermaid 是一个基于 Javascript 的图表绘制工具，可用于创建流程图、时序图、甘特图、类图、状态图、饼图等。

markdown画流程图

adorable_的博客

06-10

6309

使用工具： Typora 轻量级markdown工具使用方法：添加代码，选择flow语言基本语法： MarkDown中的流程图语法叫flow，该语法只有两个注意事项：定义元素和连接定义好的元素模块定义：模块名称=>类型: 显示的内容[:>超链接URL] 注意：=>后不能有空格， :后需要有空格连接语法：模块名称1->模块连接2 模块名称1(箭头方向)->模块连接2 模块之间使用->符号连接箭头方向包括：left、right、top、bottom、yes

参与评论您还未登录，请先登录后发表或查看评论

Mermaid流程图

江月的博客

01-18

5788

Mermaid是一个基于JavaScript的绘图工具，使用类似于Markdown的语法，允许用户通过代码创建各种图表，包括流程图、状态图、时序图和甘特图等。它可以将代码块转化为HTML代码，并支持多种图表的方向。Mermaid极大地简化了复杂图的绘制和维护，对于熟悉Markdown语法的用户来说，可以快速上手。Mermaid 是一个用于生成流程图的 JavaScript 库，使用 Markdown 语法进行描述。通过 Mermaid，用户可以在文本编辑器中编写流程图代码，然后将其渲染为可视化的流程图。

Markdown 使用技巧之利用 Mermaid 进行绘制流程图

独泪了无痕

05-30

7298

Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。

Markdown 进阶语法：Mermaid 绘图 (一) - 流程图 (Flowchart)

热门推荐

小嗷犬的博客

07-04

2万+

Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。

【Markdown】【mermaid】Mermaid流程图基础语法Flowcharts - Basic Syntax

hmywillstronger的博客

03-21

4435

流程图由节点（几何形状）和边（箭头或线条）组成。Mermaid 代码定义了如何创建节点和边，并支持不同的箭头类型、多方向箭头以及与子图的连接。如果在流程图节点中使用单词 “end”，请将整个单词或其中任何一个字母大写（例如，“End” 或 “END”），或者应用此解决方法。全小写输入 “end” 会导致流程图无法渲染。如果在连接流程图节点时使用字母 “o” 或 “x” 作为第一个字母，请在字母前添加空格或将字母大写（例如，“dev— ops”, “dev—Ops”）。

hexo优化：Markdown语法引入Flowchart和Mermaid流程图

Nolimited-Study的博客

11-29

3557

引入flowchart流程图 1、添加支持 Hexo 默认下markdown不支持flowchart流程图，需要添加支持，用git-bash在hexo目录下进行输入： npm install --save hexo-filter-flowchart 接下来只需要输入对应的实例来测试就可以了。 2、测试接下来，先进行测试一下，使用markdown进行编写flowchart语句。如下所示： ··...

Mermaid系列之FlowChart流程图

StayAlive1887的博客

08-04

4585

2.1 mermaid可以让你使用代码来创建图表和可视化效果。mermaid是一款基于javascript语言的图表工具。```mermaidA [ 长方形 ] -- 链接 -- > B((圆)) A -- > C(圆角矩形) B -- > D {菱形 } C -- > D```fill:#333;color:#333;color:#333;fill:none;链接长方形圆圆角矩形菱形```mermaidgraph LR```

一个丰富的 markdown Vue 组件，整合多种 markdown-it 插件，并内置了一些自己的功能性插件

最新发布

11-03

它集成了 mermaid、Echarts 和 flowchart.js 等流行图表库，使得开发者能够在 Markdown 文档中直接嵌入流程图、统计图表等，无需额外的插件或复杂的配置。这种图表集成能力极大地丰富了 Markdown 的可视化表达能力，...

Markdown(五)——绘图工具mermaid之流程图Flowchart

qq_36749906的博客

08-12

5061

前言：更新下mermaid画图的流程图。 流程图 1. 流程图流向在最初设计流程图的时候，首先要确定流程图的总体流向，流程图流动方向有如下几种: 方向标记备注上=>下 TB Top to Bottom 上=>下 BT Bottom to Top 左=>右 LR Left to Right 右=>左 RL Right to Left 表示流向时，在最开始用关键字graph+ 上述方向标记符确定流程图流向。从上往下 TB grap

mermaid 之 (Flowchart) 流程图

HaSaKing的博客

04-24

1万+

官网文档。

markdown之mermaid流程图

性感的小君君

08-08

2908

文章目录1. markdown语法 `(8)`1. 加粗 `**`2. 引用 `>`3. 列表 `-`4. 代码块5. 链接 `[]()`6. 图片 `![]()`7. 分割线 ---8. 标题 `#`2. 流程图 `(8)`image-202009241408178581. 方向 `(2)`2. 节点 `(4)`3. 连线 `(2)`4. 新姿势 `(4)`3. 导出4. Recommend剪切板增强截图增强终端增强5. 总结 1. markdown语法 (8) 1. 加粗 **

Markdown流程图

_Sonia_的专栏

01-28

9124

基本流程图 方向调整状态标记箭头高亮基本流程图 Markdown常用的元素有以下几种： start end operation condition inputoutput subroutine 以简单的登录场景为例，流程图代码和效果如下： start=>start: 开始 loginInfo=>inputoutput: 登录数据 verifyLogin=>su

流程图(flowchart)语法

fevershen的专栏

07-20

1万+

转自：https://blog.youkuaiyun.com/ethmery/article/details/50670294 概述 流程图的语法大致分为两部分 - 定义元素 - 连接元素语法 ```flow tag=&gt;type: content:&gt;url ... ... tag1(...)-&gt;tag2(...)-&gt;tag3(...) ``` 定义元素 t...

【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）

Tuing_的博客

03-30

9643

mermaid是一种解决文字图形转换的方案、本篇作为mermaid教程系列的第一篇，先介绍流程图（flowchart or graph）

Markdown Mermaid 流程图

子耶

08-22

1293

Markdown Mermaid 流程图语法笔记，以及 GitHub、Hexo-Next-Theme 和相关编辑器的支持一切从简，少用图，多用流程图 Markdown语法 Mermaid 语法代码块选择 mermaid 语言 sequenceDiagram 语法说明 sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! #mermaid-svg-T5h.

【优快云】 MarkDown编辑器 - Mermaid流程图

Hsy的博客

11-28

1727

前言自从接触了优快云的 MarkDown 编辑器 ,我仿佛发现了一个宝矿… 优快云官方也很贴心的给出了侧边栏的帮助文档，帮我们尽快的熟悉。其中，注释、 LaTeX 数学公式、甘特图、 UML 图以及流程图引起了我的注意。以下为官方提供的 Mermaid 流程图示例 ```mermaid graph LR A[长方形] -- 链接 --> B((圆)) A --> C(...

Markdown系列mermaid美人鱼之Flowcharts流程图

淺笑自己賤的博客

02-21

3770

流程图 - 基本语法图形该语句声明了一个新图形和图形布局的方向。这声明了一个从上到下的图形。 graph TD Start --&amp;amp;amp;gt; Stop 这声明了一个从左到右的图形。可能的方向是： TB - 顶部 BT - 底部 RL - 右边 LR - 左转 TD - 与结核病相同 graph LR Start --&amp;amp;amp;gt; Stop graph LR Start --&amp;amp;amp;gt; Sto

【markdown】流程图绘制，graph与flowchart

heyiqingsong的博客

07-10

6659

markdown流程图绘制，graph和flowchart

Markdown中使用Mermaid绘制流程图的完整指南

文中还特别提到了两种主要的流程图类型：`graph` 和 `flowchart`。尽管在Mermaid的最新版本中这两个关键字已被统一归入`graph`语法范畴，但在实际使用中仍保留了历史兼容性。`graph TD`（TD即Top-Down）是最常用的...