mermaid基本语法学习

最新推荐文章于 2024-05-12 23:48:43 发布
最新推荐文章于 2024-05-12 23:48:43 发布
阅读量1.8k 收藏
点赞数
分类专栏： Tools 文章标签： mermaid 甘特图 时序图 流程图 统计图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangkai_123456/article/details/108383280
版权

文章目录

甘特图

应用场景

日常工作中多个项目并行推进时，清楚描述每个任务的进度，以及当前状态。

如何绘制甘特图

示例

Mon 06 Mon 13 Mon 20 Completed task Active task Future task Future task2 Completed task in the critical line Implement parser and jison Create tests for parser Future task in critical line Create tests for renderer Add to mermaid Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid

其中
mermaid：表示当前使用的语言为mermaid
gantt：表示图表类型为甘特图
dateFormat：指定日期格式（Y表示年，M表示月，D表示日）。YYYY-MM-DD（2019-03-14），YY-MM-DD(19-03-14)
section： 项目关键字，空格之后输入项目名称。
任务行： section后每一行为一个任务。第一个字符串为任务名称，之后以:开头，添加任务属性。

接下来介绍常见任务属性

  • 任务状态
    • done 已完成
    • active正在进行
    • crit 关键任务
    • 默认任务都为待完成状态
  • 任务描述：在des1、des2位置添加任务描述，其它任务引用时直接引用任务描述就可以（例如引用des1）。
  • after:描述任务时间关系。des3, after des2表示des3紧跟在des2之后。
  • 任务时长：任务时长有三种方式
    • 时间范围 如：2014-01-06,2014-01-08
    • 指定天数 如：5d
    • 指定开始日期+天数 如：2014-01-06，5d
      所有任务属性关键字之间用“,”分隔，关键字需要属性时用空格分割（如：after des1,）

流程图

序列图

统计图

逝水-无痕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
mermaid-demo
10-30
1. **Mermaid的基本概念**： - **文本语法**：Mermaid最大的优点是其基于文本的语法，这使得代码可读性强，易于编辑和版本控制。 - **图表类型**：支持多种图表类型，包括流程图、序列图、甘特图、状态机图、类图...
前端项目-mermaid.zip
09-02
9. **学习曲线**：由于Mermaid语法直观，学习曲线相对平缓，即便是初学者也能快速上手。这使得Mermaid成为教育、文档编写和快速原型设计的理想选择。 总的来说，`前端项目-mermaid.zip` 提供的`mermaid-master`资源...
Mermaid语法
热门推荐
冰糖先生
06-10 1万+
文章目录Mermaid8.5版本中的新图表有关8.2版本的特别记录图表流程图顺序图甘特图类图-实验阶段Git图表-实验阶段实体关系图-试验阶段安装CDNNode.js原版文档孪生项目寻求帮助针对参与者安装编译Lint测试发布信任 Mermaid 使用Markdown语法以相同的规则从纯文本生成图标和流程图。 当你说明代码时否曾想简化文档编写并避免使用像visio一样繁杂庞大的工具？ 这就是mermaid产生的原因，一个简单的类Markdown脚本语言，其通过javascript从纯文本中产生图表。 查看m
Markdown 进阶语法：Mermaid 绘图 (一) - 流程图 (Flowchart)
小嗷犬的博客
07-04 9014
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
2024年C C++最全Mermaid画图教程（一）_mermaid绘图，温故而知新
最新发布
2401_84976662的博客
05-12 1147
threeone不同子图元素之间的连接子图内部元素之间的连接子图之间的连接c2c1twob2b1a2a1graph图fill:#333;stroke:red;important;important;important;fill:red;fill:#000;fill:#000;fill:#333;rx:0;important;important;important;important;important;important;important;important;
markdown甘特图语法介绍
wzp20092009的博客
05-09 1243
甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。
Mermaid基础语法(一)
栗少的博客
11-30 1552
流程图-基本语法 Graph graph用于定义流程局节点的走线方向； T D或者TB可以让流程图从上往下走。 ```mermaid graph T D Start --> Stop ``` Start Stop LR 从左到右 graph LR Start --> Stop Start Stop 流程图方向定义语法： TB从上到下 T D 从上到下(与TB相同) BT 从下到上 RL 从右到左 LR 从左到右 No Des&Sh
mermaid语法汇总
FHLKJJLDMW的博客
03-29 544
markdown语法mermaid
Mermaid.Cadey
04-06
"Mermaid.Cadey"可能是一个项目或者软件的名称，结合给出的标签"HTML"，我们可以推断...如果对Web开发感兴趣，学习HTML的基本语法、理解其结构和语义，以及如何与其他技术如CSS和JavaScript配合，将是必不可少的步骤。
mermaid-demo:美人鱼的小演示
05-17
### 知识点三：Mermaid 的基本语法 例如，一个简单的流程图可以用以下代码表示： ```mermaid graph TD; A[开始] --> B{决策}; B -->|Yes| C[操作]; B -->|No| D[结束]; C --> D; ``` 这段代码会生成一个有开始、...
typora工具学习版
03-01
1. **基础操作**：熟悉Markdown的基本语法，多练习写作，了解如何通过键盘快捷键提升效率。 2. **设置与配置**：探索Typora的设置选项，根据个人习惯调整字体、主题、快捷键等。 3. **实践应用**：尝试编写各种类型...
Mermaid语法大全
weixin_45017098的博客
06-13 3368
​ Mermaid是一个开源的、基于JavaScript的绘图库，它可以用简洁的、人类可读的文本描述和绘制流程图、序列图、甘特图、类图、实例图、状态图和部署图等不同类型的图表。Mermaid的语法简单易懂，支持针对不同类型图表的定制化设置，可以轻松绘制高质量的图表并嵌入到网页、Markdown文档和其它支持HTML的场景之中。此外，它还支持插件和编辑器的集成，使得用户可以更加高效地使用和管理Mermaid图表。Mermaid是一个接近理想状态的图表和流程图的设计工具，是众多开发者和作者的首选。
轻量流程图语言——Mermaid
weixin_44725869的博客
12-11 962
哦吼吼，CSDN支持Mermaid graph TD; A–>B; A–>C; B–>D; C–>D; #mermaid-svg-u7ImnGvc01fPUs3n .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-u7ImnGvc01fPUs3n .label text{fill:#33
mermaid流程图语法教程
acktomas的博客
05-08 5225
indexflowchart - 基本语法一个节点(默认)带文本的节点图形flowchart 方向节点形状体育场形状的节点子程序形状中的节点圆柱形节点圆形节点不对称形状的节点一个节点(菱形)六边形节点平行四边形平行四边形替代梯形[梯形 alt](https://mermaid-js.github.io/mermaid/#/flowchart?id=trapezoid-alt)双圈节点之间的链接带箭头的链接一个开放的链接链接上的文字带有箭头和文本的链接虚线链接带文本的虚线链接厚链接带文本的粗链接链接的链
【Mermaid 语法详细教程 01】 流程图（Flowchart / graph）
Tuing_的博客
03-30 5240
mermaid是一种解决文字图形转换的方案、本篇作为mermaid教程系列的第一篇，先介绍流程图（flowchart or graph）
mermaid常见语法汇总记录（不断更新）
技术札记
08-24 731
参考：https://mermaid.js.org/syntax/flowchart.html。
Mermaid 语法 转载
qq_37232457的博客
12-16 136
mermaid 语法转载, 一定要学习
markdown图表语法Mermaid介绍
测试开发小记
05-18 5945
Markdown是一种轻量级标记语言，除了编辑文字外，还支持插入图片、表格、公式，它是很流行的一种文档编辑语言，很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用的功能是画流程图，基于Mermaid库来渲染流程图，语法比较简洁，本文将介绍Markdown的Mermaid简单使用方法。 目录流程图1. 定义流程图节点及节点名称2. 定义流程图方向3. 节点形状4. 节点连线5. 多节点连接6. 其它类型箭头7. 特殊字符8. 子图时序图类图状态图甘特图饼图 Mermaid 是一个
Mermaid语法1-概述
Neptuneyut的博客
02-23 857
文章目录Mermaid能做什么？快速预览Mermaid可以绘制的图FlowchartGantt diagramPie chartSequence diagramClass diagramGit graph - exclamation experimentalEntity Relationship Diagram - exclamation experimentalUser Journey Diagram参考 Mermaid能做什么？ 想要接触Mermaid的人多半是从Markdown走过来的，Markdow
mermaid 类图语法
07-28
Mermaid 是一种用于创建类图的文本描述语言。它使用简洁的语法来表示类与类之间的关系、属性和方法。下面是一些常用的 Mermaid 类图语法示例： 1. 创建类和类之间的关系： ``` classDiagram ClassA --|> ClassB // ClassA 继承自 ClassB ClassC --> ClassD // ClassC 关联到 ClassD ClassE --* ClassF // ClassE 关联到多个 ClassF ClassG o-- ClassH // ClassG 聚合了 ClassH ``` 2. 定义类的属性和方法： ``` class ClassA { + publicAttribute: int // 公共属性 - privateAttribute: string // 私有属性 + publicMethod() // 公共方法 - privateMethod() // 私有方法 } ``` 3. 显示类之间的关系： ``` classDiagram ClassA ..> "1" ClassB // ClassA 关联到一个 ClassB ClassC ..> "0..1" ClassD // ClassC 关联到零个或一个 ClassD ClassE ..> "*" ClassF // ClassE 关联到多个 ClassF ClassG ..|> ClassH // ClassG 实现了接口 ClassH ``` 这些只是一些 Mermaid 类图语法的基本示例，你可以根据需要进一步扩展和定制类图。希望对你有所帮助！如果你想了解更多细节，请参考 Mermaid 文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值