Markdown流程图绘制

最新推荐文章于 2023-01-24 15:53:56 发布
最新推荐文章于 2023-01-24 15:53:56 发布
阅读量5.8k 收藏 23
点赞数 3
文章标签： markdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44000192/article/details/114981628
版权

文章目录

一、语法

流程图的绘制主要基于flowchart.js和mermaid.js。当需要在Markdown中绘制流程图时，需要把相关代码放在如下框架中。

```mermaid
category
语句
```

其中category根据流程图的种类不同而不同，其取值如下表所示。

流程图种类 取值
标准流程图 flowchart
简约流程图 graph LR/TD
UML图 sequenceDiagram
甘特图 gantt
类图 classDiagram

由于前两种使用较为广泛，故只介绍flowchart和graph LR/TD。各种类流程图范例如下所示：

标准流程图

Created with Raphaël 2.2.0 开始 我的操作 确认？ 结束 yes no

简约流程图

链接
最低0.47元/天 解锁文章
头顶有点凉
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MarkDown流程图全指导(高级开发者与项目经理必须技能）
zoomlaziti的博客
10-14 616
MarkDown流程图全指导 by Zoomla!逐浪CMS发哥 2020-09-11 18:03:32 准备工作 Markdown是一个轻量级的标记语言，使用普通文本编辑器就能快速编写，不仅显示格式丰富，功能也毫不含糊，分享一个md格式的API请求流程图。 在使用Markdown图表前，你首先需要有解析工具，在本地开发，用vs code再加Markdown preview插件，显然是可以胜任。 由于有些浏览器渲染不出来，所以少数样式流程图带用了图片插入，在强解析下会呈现出相同的两个效果。
Markdown 使用技巧之利用 Mermaid 进行绘制流程图
独泪了无痕
05-30 1837
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。
markdown 绘制流程图、时序图、甘特图
Bingo
06-25 1万+
这些复杂图形的绘制都是使用代码块实现的，指定代码块的解析语言，按照响应的绘制语法即可实现。 流程图——指定 mermaid（样式流程图） 或 flow （标准流程图）解析语言 时序图——指定 sequence（标准时序图） 或 mermaid（样式时序图） 解析语言 甘特图——指定 mermaid 解析语言 一、流程图 1. 样式流程图 基本语法...
使用markdown画流程图、时序图等
учёба
11-30 2016
使用markdown画流程图、时序图等
markdown流程图_Markdown完整教程
weixin_33411250的博客
12-14 1万+
Markdown简介Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯(英语：John Gruber)创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。Markdown 编写的文档后缀为 .md, .markdown。编辑器当前使用较多的编辑器是 ...
markdown画流程图
adorable_的博客
06-10 5531
使用工具： Typora 轻量级markdown工具 使用方法： 添加代码，选择flow语言 基本语法： MarkDown中的流程图语法叫flow，该语法只有两个注意事项：定义元素和连接定义好的元素 模块定义： 模块名称=>类型: 显示的内容[:>超链接URL] 注意：=>后不能有空格， :后需要有空格 连接语法： 模块名称1->模块连接2 模块名称1(箭头方向)->模块连接2 模块之间使用->符号连接 箭头方向包括：left、right、top、bottom、yes
markdown流程图
Faith的博客
04-10 2960
https://blog.csdn.net/suoxd123/article/details/84992282
markdown 流程图语法
尤托匹亚的博客
05-02 4288
markdown 流程图语法 1.声明格式 ```mermaid graph LR … ``` 2.声明图形方向（TB上到下，LR左到右） graph LR 3. 声明图标 source(dataGenerator) mysql[mysqlDB] kafka[kafka] phoenix((phoenix)) flinkDataSync[flinkDataSync] dataServer>dataServer] 3.1 矩形 name[label] 图形 符号 矩形 name[la
【MarkDown】基础语法
gossip博客
02-02 1189
基础语法 标题 Markdown支持6种级别的标题，对应html标签 h1 ~ h6 h1 h2 h3 h4 h5 h6 以上标记效果如下： h1 h2 h3 h4 h5 h6 段落及区块引用 需要记住的是，Markdown其实就是一种易于编写的普通文本，只不过加入了部分渲染文本的标签而已。其最终依然会转换为html标签，因此使用Markdown分段非常简单，前后至少保留一个空行即可。 而另外一个比较常见的需求就是，我们可能希望对某段文字进行强调处理。Markdown提供了一个特殊符号>用于段首进行强
使用Markdown绘制流程图(Mermaid))
lsz441的博客
01-24 417
绘制流程图
Jupyter用Markdown绘制三大结构流程图.ipynb
04-21
将ipynb文件上传到jupyter才可以看到效果：https://python.jupyter.vip/
Flowchart流程图
09-28
1. **语法简洁**：Flowchart.js支持基于Markdown风格的文本定义流程图，例如： ``` flowchart TD A[开始] --> B[处理] B --> C[检查] C -- 是 --> D[结束] C -- 否 --> E[修正] E --> D ``` 这段代码将生成...
一个vue的markdown编辑器组件，在支持常规markdown语法的基础上添加了图片上传、多主题切换、流程图支持和一系列功能
最新发布
06-05
这款编辑器不仅包含了Markdown的基本语法支持，还引入了一些高级特性，如图片上传、多主题切换以及流程图绘制，极大地提升了用户体验和编辑效率。 首先，让我们来了解一下Markdown。Markdown是一种轻量级的标记语言...
JS流程图
06-11
在这个例子中，`Flowchart.parse`解析了流程图的文本描述，`drawSVG`方法则将流程图绘制到id为'myDiagram'的SVG元素中。 在实际应用中，流程图可以用于展示程序执行逻辑、工作流程或者决策过程。通过JavaScript实现...
Markdown介绍.pptx
04-04
Markdown还支持插入代码片段、创建各级标题、绘制流程图、表格以及数学公式等。 Markdown的应用场景广泛，不仅限于开发者使用，博客作者和各种文本创作者也能从中受益。程序员在GitHub上使用Markdown编写README文件...
【Android -- 写作工具】Markdown 流程图
Kevin Learn Android
05-31 629
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。...
用代码生成流程图，Markdown的使用方法
arenascat的博客
05-12 8911
前言 通常来说我会使用一些流程图使得对于软件、工具或者行事的操作变得有更好的可理解性，说白了就是方便理解。 使用Windows软件的朋友可能会用Word，Vision此类软件，或者ProcessOn这类工具，那么是否有更好更方便的操作，可以有效提高效率？ 比如说，输入代码就可以生成，去除了繁琐的点击操作。 如何操作 使用Markdown就可以实现这种方法，具体就是使用Flowchart流程图 这部分流程图会使用这样格式来声明这部分是一个流程图的开始 【```mermaid】 【flowchat】 末尾以【
Markdown绘制思维导图
热门推荐
我是小O
04-29 4万+
1引言 Markdown是轻量级的标记语言，绘制思维导图不是Markdown的工作而是Markdown解析器（引擎）的工作。 不同的Markdown编辑器或平台使用的Markdown解析器不尽相同，语法存在细微差异。 Markdown编辑器or平台在线本地CSDN简书githubTyporaAtomMou 本文持续更新，致力于总结不同平台下Markwon绘制思维导图的解决方案，也就是写法。 ...
使用markdown编辑器绘制流程图
cprimesplus的博客
05-07 1013
使用markdown编辑器绘制流程图 基本框架：别名=>类型:描述 常用类型： start 开始 end 结束 operation 操作 subroutine 子程序 condition 条件判断 inputoutput 输入输出 连接线用->表示 代码： 在```后写上flow表示流程图即可变成下图 st=>start: Start io=>inputoutput: ...
VSCode markdown 绘制流程图
05-26
VSCode支持使用Markdown语言绘制流程图，其中最常用的是使用Mermaid插件。下面是绘制流程图的步骤： 1. 安装Mermaid插件。在VSCode中按下Ctrl+Shift+X打开扩展市场，搜索“Mermaid”并安装。 2. 在Markdown文档中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值