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