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

最新推荐文章于 2022-03-18 19:09:05 发布
最新推荐文章于 2022-03-18 19:09:05 发布
阅读量3k 收藏 7
点赞数 3

流程图 - 基本语法

图形

该语句声明了一个新图形和图形布局的方向。
这声明了一个从上到下的图形。

graph TD
    Start --> Stop
Start
Stop

这声明了一个从左到右的图形。
可能的方向是：

  • TB - 顶部

  • BT - 底部

  • RL - 右边

  • LR - 左转

  • TD - 与结核病相同

graph LR
    Start --> Stop
Start
Stop

节点和形状

节点（默认）

graph LR
    id
id

请注意，id是框中显示的内容。

带有文本的节点

也可以在框中设置与id不同的文本。如果多次执行此操作，则它是将要使用的节点的最后一个文本。此外，如果稍后为节点定义边，则可以省略文本定义。在渲染框时将使用先前定义的那个。

graph LR
    id1[This is the text in the box]
This is the text in the box
具有圆边的节点
graph LR
    id1(This is the text in the box)
This is the text in the box
圆形的节点
graph LR
    id1((This is the text in the circle))
This is the text in the circle
非对称形状的节点
graph LR
    id1>This is the text in the box]
This is the text in the box

目前只有上面的形状是可能的，而不是它的镜子。这可能会随着将来的版本而改变

一个节点（菱形）
graph LR
    id1{This is the text in the box}
This is the text in the box

节点之间的链接

节点可以与链接/边连接。可以使用不同类型的链接或将文本字符串附加到链接。

带箭头的链接
graph LR
    A-->B
A
B
一个开放的链接
graph LR
    A --- B
最低0.47元/天 解锁文章
淺笑自己賤
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Markdown(五)——绘图工具mermaid之流程图Flowchart
qq_36749906的博客
08-12 3886
前言：更新下mermaid画图的流程图。 流程图 1. 流程图流向   在最初设计流程图的时候，首先要确定流程图的总体流向，流程图流动方向有如下几种: 方向 标记 备注 上=>下 TB Top to Bottom 上=>下 BT Bottom to Top 左=>右 LR Left to Right 右=>左 RL Right to Left   表示流向时，在最开始用关键字graph+ 上述方向标记符确定流程图流向。 从上往下 TB grap
Markdown 使用技巧之利用 Mermaid 进行绘制流程图
独泪了无痕
05-30 1782
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。
mermaid flowchart使用指南
Yang的专栏
03-18 2227
mermaid flowchart 使用指南
Markdown 里 mermaid 流程图(flowchart)教程
Jintao 的博客
07-13 807
作者： Jintao 日期：2021-7-12 简介: Markdown 里 mermaid 流程图flowchart教程前言：1.0 流程图的方向 TD LR BT RL2.0 节点 id[name]2.1 节点的边框 ( ) [( )] [[ ]] [()] (()) > ] { } {{ }} [/ /] [\ \] [\ /] [/ \]2.1.1 节点的边框 ( )2.1.2 节点的边框 [( )]2.1.3 节点的边框 [[ ]]2.1.4 节点的边框 [()]2.
vue-mermaid:Vue组件的美人鱼流程图
04-30
美人鱼 Vue Componet的美人鱼流程图 要求 安装安装程序 # install dependencies npm install --save vue-mermaid 用法 注册组件 import VueMermaid from "vue-mermaid" ; Vue . use ( VueMermaid ) ; 使用组件 export default { data : function ( ) { return { data : [ { id : "1" , text : "A" , link : "---" , next : [ "2" ] , editable : true , style : "fill:#f9f,s
mermaid流程图工具_Markdown系列mermaid美人鱼之流程图
weixin_33372672的博客
01-27 394
流程图 - 基本语法图形该语句声明了一个新图形和图形布局的方向。这声明了一个从上到下的图形。graph TDStart --> Stop这声明了一个从左到右的图形。可能的方向是：TB - 顶部BT - 底部RL - 右边LR - 左转TD - 与结核病相同graph LRStart --> Stopgraph LRStart --> Stop节点和形状节点(默认)graph LR...
Jupyter用Markdown绘制三大结构流程图.ipynb
04-21
将ipynb文件上传到jupyter才可以看到效果：https://python.jupyter.vip/
mermaid:从类似于markdown的文本生成图表和流程图-开源
04-25
mermaid是基于JavaScript的图表和流程图生成工具，它使用markdown启发的文本来快速轻松地生成图表。 不用使用繁重的工具来解释您的代码。 美人鱼以其类似于markdown的简单脚本语言大大简化了文档，并提供了多种图表...
vscode-markdown-mermaid:将人鱼图和流程图支持添加到VS Code的内置markdown预览中
04-28
将人鱼图和流程图支持添加到VS Code的内置markdown预览中 用法 使用mermaid围栏代码块在markdown中创建图： ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` 您也可以使用:::块： ::: ...
一个vue的markdown编辑器组件，在支持常规markdown语法的基础上添加了图片上传、多主题切换、流程图支持和一系列功能
最新发布
06-05
这款编辑器不仅包含了Markdown的基本语法支持，还引入了一些高级特性，如图片上传、多主题切换以及流程图绘制，极大地提升了用户体验和编辑效率。 首先，让我们来了解一下Markdown。Markdown是一种轻量级的标记语言...
美人鱼：以类似于markdown的方式从文本生成图表和流程图
02-07
美人鱼 :trophy: 美人鱼被提名并获得了“最令人兴奋的技术使用”类别的 ！！！ 感谢所有参与人员，人们提出了请求，人们回答了问题，并特别感谢Tyler Long帮助我维护该项目 :folded_hands: 关于 Mermaid是一个基于Javascript的图表绘制工具，使用Markdown启发的文本定义和渲染器来创建和修改复杂的图表。 美人鱼的主要目的是帮助文档赶上开发。 Doc-Rot是Catch-22，美人鱼帮助解决。 绘制图表和文档花费了宝贵的开发人员时间，并且很快就过时了。 但是没有图表或文档会破坏生产力并损害组织学习。 美人鱼通过减少创建可修改的图表和图表所需的时间，精力和工具来解决此问题，以获取更智能和可重复使用的内容。 Mermaid图的文本定义允许轻松更新它，也可以将其作为生产脚本（和其他代码段）的一部分。 因此，作为一项单独且繁琐的任务，需要花更少的时间在文档上。 甚至非程序员也可以通过创建图
将代码JS转换为图形graphviz美人鱼流程图
08-10
将代码（JS）转换为图形（graphviz，美人鱼流程图......）
mermaid-filter:Pandoc过滤器，用于在Markdown文档中的美人鱼语法块中创建图
05-12
mermaid-filter是一个pandoc过滤器，它在markdown中添加了对语法图的支持。 像往常一样，在受保护的代码块中编写图表，如下所示： ~~~mermaid sequenceDiagram Alice->>John: Hello John, how are you? John--&...
markdown 流程图js_标记（Markdown）+美人鱼（流程图）
weixin_39975868的博客
01-14 154
From what I gather I should be able to write the following in markdown```graph TD;A-->B;A-->C;B-->D;C-->D;```and have it renderFLOWCHART / DIAGRAM IS DRAWN HEREWhat am I missing?Documentva...
hexo优化：Markdown语法引入Flowchart和Mermaid流程图
Nolimited-Study的博客
11-29 3117
引入flowchart流程图 1、添加支持 Hexo 默认下markdown不支持flowchart流程图，需要添加支持，用git-bash在hexo目录下进行输入： npm install --save hexo-filter-flowchart 接下来只需要输入对应的实例来测试就可以了。 2、测试 接下来，先进行测试一下，使用markdown进行编写flowchart语句。如下所示： ··...
markdown绘图----Mermaid
十十办文武的博客
09-03 945
​ 前言     之前一直使用plantuml，Graphviz来绘图，这两个工具可以直接使用文本生成图形。但是在写markdown文档时，经常要先生成图片，再上传插入到文档中，有点麻烦。后来发现一个Typora和csdn都支持的工具mermaid。 ​     mermaid(美人鱼), 是一个类似 Graphviz ，用文本语法来描述各种图(流程图、 时序图、甘特图)的工具，可以在markdown文档中嵌入一段 mermai
mermaid流程图工具_Markdown Mermaid 流程图
weixin_33694136的博客
01-27 227
Markdown Mermaid 流程图语法笔记，以及 GitHub、Hexo-Next-Theme 和相关编辑器的支持一切从简，少用图，多用流程图Markdown语法Mermaid 语法代码块选择 mermaid 语言sequenceDiagramsequenceDiagramAlice->>John: Hello John, how are you?John-->>Al...
Flowchart流程图和 Mermaid流程图的对比
热门推荐
ChenYX的博客
10-30 20万+
  在CSDN的markdown编辑器里有两种流程图绘制方式，分别是mermaid下的flowchart流程图和graph流程图。两种流程图的语法和绘制效果都有一定区别。本文重点讨论流程图的区别 本文目录flowchart流程图示例代码显示效果graph流程图示例代码显示效果 flowchart流程图   flowchart流程图绘制的风格偏传统流程图，优点是显示效果比较朴素并且可以较方便的调节引导线方向和流程图布局。缺点也很明显，那就是语法过分复杂了。 示例代码 ```mermaid flowcha
可以使用Markdown 的 mermaid帮我写一个流程图？
06-03
可以的，下面是一个使用mermaid语法的简单流程图的例子： ``` ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` ``` 解释一下这个语法： - `graph TD;` 表示整个图的方向是从上到下（Top-Down）。 - `A-->B;` 表示从节点 A 到节点 B 有一个有向边。 - `A-->C;` 表示从节点 A 到节点 C 有一个有向边。 - `B-->D;` 表示从节点 B 到节点 D 有一个有向边。 - `C-->D;` 表示从节点 C 到节点 D 有一个有向边。 你可以把这段代码粘贴到支持Markdown的编辑器中，就可以看到这个流程图了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值