当前位置: 首页 > article >正文

Markdown:Mermaid 画图


目录

    • 安装
    • 基本语法
    • 流程图
    • 时序图
    • 甘特图
    • 总结


Mermaid 是一款用于生成流程图、时序图、甘特图等图表的 JavaScript 库。它可以将简单的文本描述转化为美观的图表,方便开发者进行可视化展示。

安装

Mermaid 可以直接在浏览器中使用,也可以在 Node.js 环境中使用。在浏览器中使用可以通过 CDN 引入,例如:

<script src="https://cdn.jsdelivr.net/npm/mermaid@8.14.0/dist/mermaid.min.js"></script>

在 Node.js 中使用可以通过 npm 安装:

npm install mermaid

基本语法

Mermaid 的语法非常简单,只需要在代码块中使用 mermaid 关键字,并在代码块中编写 Mermaid 语法即可。例如:

graph LR;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
A
B
C
D

这段代码会生成一个简单的流程图,其中 graph 是关键字,LR 表示从左到右布局,A-->B 表示从节点 A 到节点 B 有一条箭头。

流程图

流程图可以通过 graph 关键字生成,例如:

graph LR;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
A
B
C
D

时序图

时序图可以通过 sequenceDiagram 关键字生成,例如:

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John->>+Alice: I'm doing great, thanks!
Alice John Hello John, how are you? John, can you hear me? Hi Alice, I can hear you! I'm doing great, thanks! Alice John

甘特图

甘特图可以通过 gantt 关键字生成,例如:

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析           :done,    des1, 2014-01-06,2014-01-08
    概要设计           :done,    des2, 2014-01-09,2014-01-11
    详细设计           :done,    des3, 2014-01-12,2014-01-14
    section 开发
    编码               :active,  dev1, 2014-01-17, 10d
    单元测试           :         dev2, after dev1, 5d
    集成测试           :         dev3, after dev2, 5d
    section 发布
    发布               :         pub, after dev3, 2d
    测试               :         test, after pub, 3d
2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 2014-01-25 2014-01-27 2014-01-29 2014-01-31 2014-02-01 2014-02-03 2014-02-05 2014-02-07 2014-02-09 2014-02-11 需求分析 概要设计 详细设计 编码 单元测试 集成测试 发布 测试 设计 开发 发布 项目计划

总结

Mermaid 是一款简单易用的图表生成库,可以帮助开发者快速生成流程图、时序图、甘特图等图表。通过本文的介绍,相信大家已经掌握了 Mermaid 的基本使用方法。


声明:资源可能存在第三方来源,若有侵权请联系删除!


http://www.kler.cn/a/584096.html

相关文章:

  • Java EE 进阶:SpringBoot 配置⽂件
  • docker3-容器与镜像命令
  • 51单片机——汇编工程建立、仿真、调试全过程
  • AI短视频流量获取方法(一)
  • 使用DMA进行ADC数据读取与USART数据发送与接收
  • 基于SpringBoot实现旅游酒店平台功能十一
  • SpringMVC——REST简介及入门案例
  • c++之STL库
  • 蓝桥杯嵌入式组第十二届省赛题目解析+STM32G431RBT6实现源码
  • 笔记:代码随想录算法训练营day43:LeetCode300.最长递增子序列、674. 最长连续递增序、 718. 最长重复子数组
  • 大模型在老年性白内障诊疗全流程中的应用研究报告
  • Android wgs84坐标系转CGCS2000坐标系
  • CentOS8+Zabbix7.2.4解决中文显示问题
  • rtsp在网页上显示(webrtc-stream)
  • Pytest自动化测试框架pytest-xdist分布式测试插件
  • JAVA面试_进阶部分_Java JVM:垃圾回收(GC 在什么时候,对什么东西,做了什么事情)
  • 【Unity】在项目中使用VisualScripting
  • 计算机视觉算法实战——驾驶员分心检测(主页有源码)
  • 大模型开源的工具包有哪些特殊符号可以使用;SEP 是什么
  • HTML 表格的详细介绍与应用