Mermaid画图教程（二）

最新推荐文章于 2024-05-16 18:45:00 发布

CofCai

最新推荐文章于 2024-05-16 18:45:00 发布

阅读量1.3k

点赞数 1

分类专栏： Tools 文章标签： css markdown

本文链接：https://blog.csdn.net/weixin_44360592/article/details/109550092

版权

Tools 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

文章目录

References
状态图-State diagrams
- 一个例子看所有
- 并发
实体关系图
用户旅程图
甘特图

References

mermiad教程

状态图-State diagrams语法说明

实体关系图-Entity Relationship Diagrams语法说明

用户旅程图-User Journey Diagram语法说明

甘特图-Gantt语法说明

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

在这里插入图片描述

CofCai

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Mermaid画图教程（二）

文章目录References状态图-State diagrams一个例子看所有并发实体关系图用户旅程图甘特图Referencesmermiad教程状态图-State diagrams语法说明实体关系图-Entity Relationship Diagrams语法说明用户旅程图-User Journey Diagram语法说明甘特图-Gantt语法说明mermaid在线作图工具-可保存为图片Mermaid画图教程（一）状态图-State diagrams状态图是计算机科学及相关领域中用于描
复制链接

扫一扫

专栏目录