【每天1分钟】MarkDown语法学习之流程图-mermaid-基本图形

最新推荐文章于 2024-08-08 07:58:04 发布
最新推荐文章于 2024-08-08 07:58:04 发布
阅读量682 收藏 2
点赞数
分类专栏： markdown 文章标签： markdown 流程图 甘特图

【每天1分钟】MarkDown语法学习之流程图-mermaid-基本图形


基本图形

  • id + [文字描述]矩形
  • id + (文字描述)圆角矩形
  • id + >文字描述]不对称的矩形
  • id + {文字描述}菱形
  • id + ((文字描述))圆形

示例

mermaid
graph TD
    id[带文本的矩形]
    id4(带文本的圆角矩形)
    id3>带文本的不对称的矩形]
    id1{带文本的菱形}
    id2((带文本的圆形))

效果

带文本的矩形
带文本的圆角矩形
带文本的不对称的矩形
带文本的菱形
带文本的圆形
小白TOO爱学习
关注
专栏目录
Markdown 使用技巧之利用 Mermaid 进行绘制流程图
独泪了无痕
05-30 2177
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。
hexo优化：Markdown语法引入Flowchart和Mermaid流程图
Nolimited-Study的博客
11-29 3216
引入flowchart流程图 1、添加支持 Hexo 默认下markdown不支持flowchart流程图，需要添加支持，用git-bash在hexo目录下进行输入： npm install --save hexo-filter-flowchart 接下来只需要输入对应的实例来测试就可以了。 2、测试 接下来，先进行测试一下，使用markdown进行编写flowchart语句。如下所示： ··...
Markdown里面使用mermaid画流程图（基础）
热门推荐
背对星星和月亮
09-21 6万+
Markdown里面使用mermaid画流程图（基础）之前有介绍如何在Markdown里面使用flowchart.js插件支持画流程图。Markdown编辑器Typora同样支持使用mermaid插件来进行画图。Graph关键字graph表示一个流程图的开始，同时需要指定该图的方向。例如 graph LR ​ A –> B 表示如下一个从左到右的图。流程图的定义仅由graph开始，但是方向
Mermaid 图形语法快速入门指南
最新发布
gitblog_01159的博客
08-08 366
Mermaid 图形语法快速入门指南 mermaid项目地址:https://gitcode.com/gh_mirrors/mer/mermaid 1. 项目目录结构及介绍 Mermaid 是一个基于 JavaScript 的图形图表工具，它通过文本描述生成流图、序列图等多种图表。以下是其核心仓库的主要目录结构： . ├── build // 构建输出文件 ├─...
在Markdown中使用Mermaid来绘制流程图
weixin_44943389的博客
07-07 1334
在Markdown中使用Mermaid来绘制流程图
Markdown Mermaid 流程图
子耶
08-22 832
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 绘图 (一) - 流程图 (Flowchart)
小嗷犬的博客
07-04 1万+
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
Python库 | markdown-mermaid-to-images-0.1.2.tar.gz
03-06
Markdown 以其简洁易读的语法，被广泛用于编写文档和笔记，而 Mermaid 是一个图表生成器，通过简单的文本语法生成流程图、序列图、甘特图等。`markdown-mermaid-to-images-0.1.2.tar.gz` 是一个 Python 库，它将 ...
discourse-mermaid:话语插件，允许使用Mermaid JavaScript库创建流程图
05-12
1. **获取插件**：从GitHub上下载或克隆`discourse-mermaid-master`压缩包。 2. **安装依赖**：确保你的Discourse环境已经配置好，并且所有必要的依赖都已经安装。 3. **启用插件**：将`discourse-mermaid-master`...
mermaid流程图工具_Markdown系列mermaid美人鱼之流程图
weixin_33372672的博客
01-27 447
流程图 - 基本语法图形该语句声明了一个新图形和图形布局的方向。这声明了一个从上到下的图形。graph TDStart --> Stop这声明了一个从左到右的图形。可能的方向是：TB - 顶部BT - 底部RL - 右边LR - 左转TD - 与结核病相同graph LRStart --> Stopgraph LRStart --> Stop节点和形状节点(默认)graph LR...
Markdown mermaid种草(3)_ 流程图
耳东小白的小笔记本儿
01-28 6805
耳东小白倾情推荐，Markdown代码绘图神器之mermaid绘制流程图篇
Mermaid画图教程（一）
weixin_44360592的博客
11-06 8348
文章目录References流程图-Flowchart流程图方向图形形状及连接方式自定义风格使用关键字style声明成一个类多次使用/子图绑定事件饼图-pie顺序图-sequenceDiagram类图-class diagrams类之间的关系类注释状态图-State diagrams一个例子看所有并发实体关系图用户旅程图甘特图 References mermiad画图例子 流程图-Flowchart语法说明 顺序图-Sequence diagrams语法说明 类图-Class diagrams语法说明 状态
【markdown】使用 Mermaid 制作的图表和图形的一些示例
cxyhjl的博客
08-17 1981
Mermaid是一种用于绘制流程图,状态图,序列图和甘特图的文本标记语言。Mermaid的主要特点包括:基于文本 - 使用类似Markdown的语法来描述图表,之后可以转换为SVG图表。支持流程图 - 使用图形节点和箭头来表示流程步骤和流转方向。支持状态图 - 可以绘制状态之间的转换条件。支持序列图 - 用于描绘不同对象之间消息传递的时序。支持甘特图 - 项目管理常用的甘特图也可以通过Mermai...
【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）
Tuing_的博客
03-30 5976
mermaid是一种解决文字图形转换的方案、本篇作为mermaid教程系列的第一篇，先介绍流程图（flowchart or graph）
【每天1分钟】MarkDown语法学习之流程图-mermaid-自定义样式
小白TOO爱学习的博客
07-03 4456
【每天1分钟】MarkDown语法学习之流程图-mermaid-自定义样式 自定义样式 语法: style id 具体样式 示例 mermaid graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5 style id2 fill...
【CSDN】 MarkDown编辑器 - Mermaid流程图
Hsy的博客
11-28 1154
前言 自从接触了 CSDN 的 MarkDown 编辑器 ,我仿佛发现了一个宝矿… CSDN 官方也很贴心的给出了侧边栏的帮助文档，帮我们尽快的熟悉。 其中，注释、 LaTeX 数学公式、甘特图、 UML 图以及流程图引起了我的注意。 以下为官方提供的 Mermaid 流程图示例 ```mermaid graph LR A[长方形] -- 链接 --> B((圆)) A --> C(...
用代码画流程图和时序图快餐教程(2) - mermaid数据流图速成
lusing的专栏
06-02 9637
mermaid的好处是可以在写markdown文档的同时，就直接可以画图了。
Markdown教程--Markdown列表
linus.lin的博客
07-14 877
Markdown教程–Markdown列表 Markdown 支持有序列表和无序列表。 无序列表使用星号()、加号(+)或是减号(-*)作为列表标记，这些标记后面要添加一个空格，然后再填写内容： * 第一项 * 第二项 * 第三项 + 第一项 + 第二项 + 第三项 - 第一项 - 第二项 - 第三项 显示结果如下： 有序列表使用数字并加上 . 号来表示，如： 1. 第一项 2. 第二项 3. 第三项 显示结果如下： 列表嵌套 列表嵌套只需在子列表中的选项前面添加四个空格即可： 1. 第一项：
Markdown初步学习
肖了个肖~的博客
07-07 362
目录 第一步：下载Typora软件 第二步：初步掌握Markdown 1、标题 2、文本 3、注释 4、水平分割线 5、超链接 6、图片 7、列表 8、表格 9、代码 第一步：下载Typora软件 百度搜索 Typora，官网下载此软件，然后随便在电脑某个地方新建一个文件，扩展名需改成 .md。 第二步：初步掌握Markdown 1、标题 一级标题：# 一级标题名 二级标题：## 二级标题名 三级标题：### 三级标题名 依次类推 2、文本 倾斜：*内容*.
markdown 流程图语法 +css
07-13
以下是基本的Markdown流程图语法以及如何配合CSS增强效果： **Markdown流程图语法示例：** ```markdown 1. 开始 ``` -> 输入 | v 处理 | v 结果 ``` 这个例子描述了一个简单的流程：从开始到处理输入，然后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值