References
实体关系图-Entity Relationship Diagrams语法说明
用户旅程图-User Journey Diagram语法说明
mermaid在线作图工具-可保存为图片
Mermaid画图教程(一)
状态图-State diagrams
状态图是计算机科学及相关领域中用于描述系统行为的一种图。状态图要求所描述的系统由有限数量的状态组成;
Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss
:状态图的样式是通过定义多个CSS类来完成的。在渲染期间,这些类是从src/themes/state.scss
中的文件中提取的。
stateDiagram-v2
%% 状态的定义
%% state "this is a state description" as s2
%% s2: this is a state description
%% 状态跃迁transitions
%% s1 --> s2: A transitions
[*] --> Still:begin
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
一个例子看所有
stateDiagram-v2
%% fork:岔口,join:联结
%% 声明一个岔口/分散
state fork_state <<fork>>
%% 声明一个联结/汇聚
state join_state <<join>>
%% 标签
note left of fork_state: 这是一个分离点
note left of join_state: 这是一个汇聚点
state ST1 {
[*] --> st1
st1 --> [*]
}
state ST2 {
[*] --> st2
st2 --> [*]
}
state ST3 {
[*] --> st3
st3 --> [*]
state innerChange {
[*] --> state1
state1 --> [*]
}
}
[*] --> fork_state
fork_state --> ST1: 从汇分离
fork_state --> ST2: 从汇分离
ST1 --> join_state: 汇聚到源
ST2 --> join_state: 汇聚到源
join_state --> ST3
并发
stateDiagram-v2
[*] --> 并发
state 并发 {
[*] --> 数字键关闭
数字键关闭 --> 数字键开启 : 数字键被按下
数字键开启 --> 数字键关闭 : 数字键被按下
--
[*] --> 大写键关闭
大写键关闭 --> 大写键开启 : 大写键被按下
大写键开启 --> 大写键关闭 : 大写键被按下
--
[*] --> 滚动键关闭
滚动键关闭 --> 滚动键开启 : 滚动键被按下
滚动键开启 --> 滚动键关闭 : 滚动键被按下
}
实体关系图
实体关系模型(或ER模型)描述了特定知识领域中相互关联的相关事物。基本的ER模型由实体类型(对感兴趣的事物进行分类)组成,并指定实体之间可以存在的关系(这些实体类型的实例),在mermaid
算是新功能,可能存在错误。实体名称通常用大写字母表示,尽管尚无公认的标准,在mermaid
中则不需要。
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
用户旅程图
用户旅程详细描述了不同用户在系统,应用程序或网站内完成特定任务所采取的步骤。 该技术显示了当前(按原样)的用户工作流程,并揭示了未来工作流程的改进领域。每个用户旅程都分为几个部分,这些部分描述了用户要完成的任务部分,任务语法是:Task name: <score>: <comma separated list of actors>
,即任务名称: <得分>:<逗号分隔的角色列表>
。
journey
%% 标题
title 我的一早上
%% 任务1
section 起床
刷牙: 5: Me, He
洗脸: 3: Me, He
出门: 1: Me, He
%% 任务2
section 去上课
去食堂: 2 : Me
吃早饭: 5: Me
去教室: 4 :Me, He
甘特图
甘特图是一种条形图,最早由Karol Adamiecki于1896年开发,由Henry Gantt在1910年代独立开发,它说明了一个项目进度表以及完成任何一个项目所需的时间。甘特图说明了项目的终端元素和摘要元素的开始日期和结束日期之间的天数。
甘特图会将每个计划的任务记录为从左到右延伸的连续条形图。x轴代表时间,y轴记录不同的任务以及完成任务的顺序。
重要的是要记住,当“排除”特定于某个任务的date,day或日期集合时,甘特图将通过向右扩展相等的天数来适应这些变化,而不是通过在内部形成间隙来适应这些变化。
gantt
title 一个简单的例子
dateFormat YYYY-MM-DD
section Section
%% A task,标记为a1,从2014-01-01开始,持续30天
A task :a1, 2014-01-01, 30d
%% 另一个任务,紧跟着a1,持续20天
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
%% 默认紧跟上一个任务
another task : 24d
您可以将图表分为多个部分,例如,将项目的不同部分(如开发和文档)分开。为此,请使用section
关键字开始一行并为其命名(请注意,与整个图表的标题不同,此名称是必需的)。
dateFormat
(默认为YYYY-MM-DD
)定义甘特图元素的日期输入格式。这些日期如何在呈现的图表输出中表示,由axisFormat
定义。
下面的gantt图没有渲染出来,就贴一张照片了。
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section 一个任务
%% 已完成的任务
已完成任务 :done, des1, 2014-01-06,2014-01-08
%% 当前任务,持续3天
当前任务 :active, des2, 2014-01-09, 3d
%% 未来的任务,紧跟着des2任务
未来任务1 : des3, after des2, 5d
未来任务2 : des4, after des3, 5d
section 困难任务
在截止日期前完成的任务/crit,done :crit, done, 2014-01-06,24h
解析Json :crit, done, after des1, 2d
当前紧急任务/crit,active :crit, active, 3d
%% 未来五天之内要完成的意思?
Future task in critical line :crit, 5d
Create tests for renderer :2d
添加到mermaid :1d
section 文档
描述gantt语法 :active, a1, after des1, 3d
添加一个gantt例子页面 :after a1 , 20h
添加另一个gantt例子页面 :doc1, after a1 , 48h
section 最后一个任务
还是描述gantt语法 :after doc1, 3d
快好了 :40h
最后一个小任务 :48h