mermaid 速学
2023-04-06 11:19:58 1 举报AI智能生成
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的JS库，底层使用 D3.js，广泛集成于许多 Markdown 编辑器中。
作者其他创作
大纲/内容
说明
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的JS库，底层使用 D3.js，广泛集成于许多 Markdown 编辑器中。
使用方式
👍vscode
安装插件：markdown preview enhanced
👍ChatGPT
prompt：请用 mermaid 写一个关于 {XXX} 的图
github md格式文件展示
自带
typora
自带
印象笔记
自带
html嵌入
引用 mermaid.js 文件
本地命令行
npm i mermaid
支持图表类型
Flowchart 流程图
🔥Sequence Diagram 时序图
Class Diagram 类图
泛化 = 实现 > 组合 > 聚合 > 关联 > 依赖
连线
<|--
Implements
继承
Is-a 关系
<--
Realization
实现
Like-a 关系
*--
Composition
组合
Part-of 关系
o--
Aggregation
聚合
Has-a 关系
<--
Association
关联
Use-a 关系，长期的
<..
Dependency
依赖
Use-a 关系，临时的
类注解
<<Interface>>
<<Abstract>>
<<Service>>
<<Enumeration>>
可见性
+ Public
- Private
# Protected
* Abstract
foo()*
$ Static
foo()*
field$
标题
---
title: XXX
---
title: XXX
---
嵌套类型用~包裹
List<List<int>>
List~List~int~~
State Diagram 状态图
Entity Relationship Diagram ER图
User Journey 用户旅程图
🔥Gantt 甘特图
title
图表标题
dateFormat
定义用户输入日期的格式
YYYY-MM-DD
axisFormat
横轴展示日期格式
%Y-%m-%d
tickInterval
横轴日期刻度粒度
1week
1day
excludes
剔除日期
weekends
剔除周六周日
sunday, monday
剔除周日周一
2023-04-01,2023-03-02
剔除指定日期
todayMarker
标记今日
todayMarker on/off
todayMarker stroke-width:1px,stroke:#0f0,opacity:0.5
section
定义分组
任务格式
任务描述 : 状态（可缺省），任务名称（可缺省），开始时间，持续时长（或结束时间）
状态
done|active|crit|milestone
done
已完成
active
进行中
无
(默认)未开始
crit
关键任务，可与其它叠加使用
milestone
里程碑，实际显示的位置为任务时间段的正中间
Pie Chart 饼图
Requirement Diagram 需求图
需求图提供了需求之间如何相互关联以及与模型中其他元素（包括业务驱动程序，约束，业务规则，用例，用户案例，设计组件等）如何相关的直观表示。
🔥Gitgraph (Git) Diagram Git图谱
C4C Diagram (Context) Diagram C4软件架构图
Mindmaps 思维导图
Timeline 时间线
其他
注释语法
%% xxx
0 条评论
下一页
