zoukankan      html  css  js  c++  java

  • Markdown画图(mermaid)学习

    简介

    目前博客园支持mermaid的graph，subgraph，sequenceDiagram，gantt，classDiagram
    mermaid(美人鱼), 是一个类似markdown，用文本语法来描述文档图形的工具。mermaid语法包含在博客园markdown中。
    注释为：

    %% 注释

    插入为：（以下的例如只列举代码）

    ```mermaid
    代码
    ```

    或

    <body>
  <div class="mermaid">
   代码
  </div>
</body>

    graph(流程图)

    关键字graph表示一个流程图的开始，同时需要指定该图的方向。如果内容包含特殊字符，可使用"字符"，或参考这个的markdown转义。

    方向

    代码 方向
    TB 从上到下
    TD 从上到下
    BT 从下到上
    RL 从右到左
    LR 从左到右

    T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN
    例如：

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

    形状

    代码 形状
    变量 默认形状
    变量[内容] 矩形
    变量(内容) 圆矩形
    变量((内容)) 圆形
    变量>内容] 非对称形
    变量{内容} 菱形

    例如：

    graph LR
  A
  B[b]
  C(c)
  D((d))
  E>e]
  F{f}
    graph TB A B[b] C(c) D((d)) E>e] F{f}

    连线

    话不多说，上表。注意：中间的符号或多或少都不行

    代码 形状
    A-->B 箭头
    A---B 直连
    A--text---B 注释
    A--text-->B 箭头注释
    A-.-B 虚线直连
    A-.->B 虚线箭头
    A-.text.-B 虚线注释直连
    A-.text.->B 箭头虚线注释
    A===B 加粗直连
    A==>B 加粗箭头
    A==text===B 加粗注释直连
    A==text==>B 加粗注释箭头 
    graph TB
  A1-->B1
  A2---B2
  A3--text---B3
  A4--text-->B4
  A6-.-B5
  A6-.->B6
  A7-.text.-B7
  A8-.text.->B8
  A9===B9
  A10==>B10
  A11==text===B11
  A12==text==>B12
    graph TB A1-->B1 A2---B2 A3--text---B3 A4--text-->B4 A5-.-B5 A6-.->B6 A7-.text.-B7 A8-.text.->B8 A9===B9 A10==>B10 A11==text===B11 A12==text==>B12

    样式

    将特定样式例如较粗的边框或不同的背景颜色

    graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-4px
    style id2 fill:#bbf,stroke:#f66,stroke-2px,color:#fff,stroke-dasharray: 5, 5

    大例如

    graph LR
  A[x]
  B["if(x<0)"]
  C["x=-x"]
  D[return x]
  A-->B-->C-->D
  C-->D
    graph LR A[x] B["if(x<0)"] C["x=-x"] D[return x] A-->B B-->C B-->D C-->D

    subgraph(子图)

    格式

    注意：外层可以使用里层中的节点，可以认为是全局变量

    graph LR
  subgraph 名称
    代码
  end
  subgraph 名称
    代码
  end

    大例如：

    graph LR subgraph g1 a1-->b1 end subgraph g2 a2-->b2 end subgraph g3 a3-->b3 end b1-->a2 b2-->a3

    sequenceDiagram(序列图)

    功能

    • participant
      参与者，相当先定义模块，可通过设定参与者(participant)的顺序控制展示顺序。
      例如：
    partcipant A
partcipant B
    sequenceDiagram participant A participant B 
    partcipant B
partcipant A
    sequenceDiagram participant B participant A

    也可以使用别名：

    sequenceDiagram
  participant A as A dog
  participant B as Bob
  A->B:Hello
    sequenceDiagram participant A as A dog participant B as Bob A->B:Hello
    • note
      注释，格式如下
    note right of或left of 变量:Text
note over 变量左,变量右 :Text
    • 循环
    loop 题目
代码
end
    • 选择
    alt 题目
代码
else
代码
end

    在没有else的情况下使用 opt(option,选择)

    opt 题目
代码
end

    例如：

    sequenceDiagram
　　A->>B: Hello B, how are you?
　　alt is sick
　　　　B->>A:not so good :(
　　else is well
　　　　B->>A:good
　　end
　　opt another
　　　　B->>A:Thanks for asking
　　end
    sequenceDiagram 　　A->>B: Hello B, how are you? 　　alt is sick 　　　　B->>A:not so good :( 　　else is well 　　　　B->>A:good 　　end 　　opt another 　　　　B->>A:Thanks for asking 　　end
    • 激活停用
      可以激活activate或停用deactivate。
    sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
    sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John

    也可通过在消息箭头后面添加+或-后缀，这一种快捷方式标记：

    sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Great!
    sequenceDiagram Alice->>+John: Hello John, how are you? John-->>-Alice: Great!
    • 平行
      可以显示并行发生的动作。
    par [题目]
代码
and [题目]
代码
and [题目]
代码
end

    sequenceDiagram
  participant A
  participant B
  par A to B
    A->B:Hello
  and A to C
    A->C:Hello
  end
    sequenceDiagram participant A participant B par A to B A->B:Hello and A to C A->C:Hello end

    连线

    代码 形状
    -> 无箭头实线
    ->> 有箭头实线
    --> 无箭头虚线
    -->> 有箭头虚线
    -x 带x实线
    --x 带x虚线

    在必须后面加:,以加以注释。
    例如：

    sequenceDiagram
  A -> B : none
  A ->> B : none
  A --> B : none
  A --> B : none
  A -x B : none
  A --x B : none
    sequenceDiagram A -> B : none A ->> B : none A --> B : none A --> B : none A -x B : none A --x B : none

    gantt(甘特图)

    甘特图是一类条形图，由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述

    功能

    代码 解释
    title 标题
    dateFormat 日期写入格式
    axisFormat 日期输出格式
    section 模块
    done 已经完成
    Active 当前正在进行
    Future 后续待处理
    crit 关键阶段
    日期缺失 默认从上一项完成后

    格式基本为：内容:关键是否,状态,变量,日期

    日期写入格式

    默认为：dateFormat YYYY-MM-DD

    代码 例如 解释
    YYYY 2020 4位年数
    YY 20 2位年数
    Q 4 季度
    M或MM 1或12 月
    D或DD 1或31 日
    Do 1st或31st 序数的日
    DDD或DDDD 1或365 年的日
    X 1410715640.579 秒
    x 1410715640579 毫秒
    H或HH 0或23 时
    h或hh 1或12 12时记时法
    a或A am或pm 12时的附加
    m或mm 0或59 分
    s或ss 0或59 秒
    S 0或9 十分之一秒
    SS 0或99 百分之一秒
    SSS 0或999 千分之一秒
    Z或ZZ +12:00 从UTC偏移的时间

    日期输出格式

    默认为：axisFormat %Y-%m-%d

    代码 解释
    %a 星期几的缩写
    %A 完整的工作日名称
    %b 月份的缩写
    %B 完整的月份名称
    %c 日期和时间如"％a％b％e％H：％M：％S％Y"
    %d 以十进制数[01,31]补零的月份
    %e 以十进制数字表示的月份中带空格的日期[1,31]
    %H 小时(24小时制)十进制数字[00,23]
    %I 小时(12小时制)十进制数字[01,12]
    %j 年中的天十进制数字[001,366]
    %m 以十进制数字[01,12]表示的月份
    %M 分钟十进制数字[00,59]
    %L 十进制数字[000，999]表示的毫秒
    %p AM或PM
    %S 秒十进制数字[00,61]
    %U 一年中的第几周(星期日为一周的第一天)以十进制数[00,53]为准
    %w 工作日以十进制数字[0,6]
    %W 一年中的第几周(星期一为一周中的第一天)以十进制数[00,53]为准
    %x 日期以“％m /％d /％Y”表示
    %X 时间以“％H：％M：％S”表示
    %y 不带世纪的十进制数字[00,99]
    %Y 以世纪作为十进制数字的年份
    %Z 时区偏移量
    %% 文字“％”字符

    大例如

    gantt
  title AB
  section A
  A1 : done, 2020-01-01,2020-01-02
  A2 : active, 2020-01-02,1d
  section B
  B1 : future, 2020-01-03
  B2 : crit,active,b2,2020-01-03,48h
  section C
  C1 : done,after b2,1d
    gantt title AB section A A1 : done, 2020-01-01,2020-01-02 A2 : active, 2020-01-02,1d section B B1 : future, 2020-01-03 B2 : crit,active,b2,2020-01-03,48h section C C1 : done,after b2,1d

    classDiagram(类图)

    类图是面向对象建模的主要构建块。它用于应用程序结构的一般概念建模，以及用于将模型转换为编程代码的详细建模。类图也可以用于数据建模。类图中的类表示主要元素，应用程序中的交互以及要编程的类。
    就是大了点，以我现在的能力是无法改变的。

    功能

    • 类
      UML提供了表示类成员的机制，例如属性和方法，以及有关它们的其他信息。图中一个类的单个实例包含三个隔离专区：

    顶部的小节包含类的名称。它以粗体和居中打印，并且第一个字母大写。它还可能包含描述类性质的可选注释文本。
    中间隔离专区包含类的属性。它们左对齐，第一个字母为小写。
    底部的隔离区包含类可以执行的操作。它们也左对齐，首字母为小写。

    • 定义类
      定义类有两种方法：
    1. 使用关键字类（如）明确定义一个类class A.
    2. 通过它们之间的关系定义两个类A <|-- B
      命名约定：类名应由字母数和下划线字符组成。
        classDiagram
    class A
    A <|-- B
    classDiagram class A A <|-- B
    • 定义成员
      根据括号()是否存在来区分属性和函数/方法。与()一起的被视为函数/方法，而其他被视为属性。
      使用:（冒号）后跟成员名称来关联类的成员
        classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal : +isMammal()
    Animal : +mate()
    Duck : +String beakColor
    Duck : +swim()
    Duck : +quack()
    Fish : -int sizeInFeet
    Fish : -canEat()
    Zebra : +bool is_wild
    Zebra : +run()
    classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal : +isMammal() Animal : +mate() Duck : +String beakColor Duck : +swim() Duck : +quack() Fish : -int sizeInFeet Fish : -canEat() Zebra : +bool is_wild Zebra : +run()
    • 能见度
      为了指定类成员的可见性（即任何属性或方法），可以将这些符号放在成员名称的前面，但它是可选的：
      1.+Public
      2.-Private
       classDiagram
     AA <|-- BB
     AA : +a()
     BB : -b()
    classDiagram AA <|-- BB AA : +a() BB : -b()

    连线

    大概定义为：

    类型1 关系 类型2 ： 注释

    代码 代码 解释
    <|-- --|> 实线三角
    *-- --* 实线菱头
    o-- --o 实线空菱
    <-- --> 实线箭头
    -- -- 实线直连
    <.. ..> 实线箭头
    <|.. ..|> 实线三角
    .. .. 实线直连

    例如：

         classDiagram
       A1 <|-- B1
       B1 --|> C1
       A2 *-- B2
       B2 --* C2
       A3 o-- B3
       B3--o C3
       A4 <-- B4
       B4--> C4
       A5 -- B5
       B5-- C5
       A6 <.. B6
       B6..> C6
       A7 <|.. B7
       B7 ..|> C7
       A8 .. B8
       B8 .. C8
    classDiagram A1 <|-- B1 B1 --|> C1 A2 *-- B2 B2 --* C2 A3 o-- B3 B3--o C3 A4 <-- B4 B4--> C4 A5 -- B5 B5-- C5 A6 <.. B6 B6..> C6 A7 <|.. B7 B7 ..|> C7 A8 .. B8 B8 .. C8
  • 相关阅读:
    unity, trail renderer gone black on iOS
    sql date时间加减几天几小时
    mysql sql获取上条插入id，update影响行数
    cmd获取系统时间
    js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange
    javascript 动态改变onclick事件
    限制input输入类型(多种方法实现)
    在VMware Workstation11虚拟机上安装黑苹果
    mysql存储过程procedure
    我常用的在线取色器
  • 原文地址：https://www.cnblogs.com/Srand-X/p/13347646.html
Copyright © 2011-2022 走看看