markdown之mermaid

简介: markdown之mermaid

01 简单的流程图

  • TD或TB:top to bottom,从上到下的流程图
  • LR:从左到右
  • 其它:RL,BT
flowchart LR;
A([节点A的圆矩框]) --> |AB之间注释|B[[节点B的外框]];
A --> C(节点C的圆角矩形框);
A --A到F的注释--> F>节点F的旗帜形框];
A --- H(A到H曲线连接非箭头)
A -.-> I{{节点I的外框}}
B --> D[(节点D的桶框)];
C <--> D;
D ==> E((节点E的圆框));
F --> G{节点G的正菱形框}
G --> G1[/节点G1的平行四边形框/]
H --> H1[/节点H1的梯形框\]

AB之间注释

A到F的注释

节点A的圆矩框

节点B的外框

节点C的圆角矩形框

节点F的旗帜形框

A到H曲线连接非箭头

节点I的外框

节点D的桶框

节点E的圆框

节点G的正菱形框

节点G1的平行四边形框

节点H1的梯形框

02多个子图的流程图

flowchart TB
  c1 --> a2
  subgraph sub1
    a1 --> a2;
  end
  subgraph sub2
    b1 --> b2;
  end
  subgraph sub3
    c1 --> c2;
  end

sub3

sub1

c2

c1

sub2

b2

b1

a2

a1

03 饼图

pie
  title helloworld
  "python": 0.2
  "java": 0.2
  "go": 0.2
  "c++": 0.2
  ".net": 0.2

20%20%20%20%20%helloworldpythonjavagoc++.net

04 甘特图

gantt
  title 甘特demo
  dateFormat YYYY-MM-DD
  section 项目A
    A task :a1, 2014-01-01, 10d
    B task :active, after a1, 30d
    C task :crit, after a1, 10d
    section 项目B
    B1 task :b1, 2014-01-02, 15d
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A taskB1 taskB taskC taskTask in secanother task项目A项目B甘特demo

05 顺序图

sequenceDiagram
    Alice->>John: Hello John, how are you?
    Note over Alice,John: 双方开始问候
    John->>Alice: Hi Alice! I'm fine. and you?
    Alice ->> John: ok. nice weather.
    activate John
    Note right of John: 在右注释
    John ->> Alice: you are right.
    deactivate John
    loop 整点循环
      Alice ->> John: 您可真会说话
    end

JohnAliceJohnAlice双方开始问候在右注释loop[整点循环]Hello John, how are you?Hi Alice! I'm fine. and you?ok. nice weather.you are right.您可真会说话

06 class diagram(UML)

classDiagram
  Animal <|-- Duck
  Animal <|-- Fish
  Animal <|-- Zebra
  Animal : +int age
  Animal : +string gender
  Animal : +isMammal()
  Animal : +mate()
  class Duck{
    +String beakColor
        +swim()
        +quack()
  }
  class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

Animal

+int age

+string gender

+isMammal()

+mate()

Duck

+String beakColor

+swim()

+quack()

Fish

-int sizeInFeet

-canEat()

Zebra

+bool is_wild

+run()

07 旅程图

journey
  title 我的国庆假期
  section work to home
    第一天休息: 5: 我
    第二天休息: 5: 我
    第三天休息: 4: 我
    第四天休息: 3: Me
    第五天休息: 2: Me

image.png

相关文章
在markdown中添加视频的两种方法
markdown浏览器中如何添加视频呢?两种方式
|
6月前
|
数据可视化 IDE Java
PlanUML和Mermaid哪个好?
PlanUML和Mermaid哪个好?
537 0
|
Linux iOS开发 MacOS
5分钟学会 markdown
5分钟学会 markdown
111 0
|
uml
Markdown总结
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。 Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。 Markdown 编写的文档后缀为 .md, .markdown。 Markdown 能被使用来撰写电子书,如:Gitbook。
109 0
【Markdown】初使用
【Markdown】初使用
121 0
|
JavaScript Linux 对象存储
MarkDown常见小技巧
MarkDown常见小技巧
156 0
mermaid
mermaid
143 0
|
JavaScript 前端开发
有的时候我觉得我不会 Markdown
「这是我参与2022首次更文挑战的第6天,活动详情查看:2022首次更文挑战」。
148 0
有的时候我觉得我不会 Markdown
你还不会使用 Markdown?
Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者HTML) 文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性,由于 Markdown 的轻量化、易读、易写特性,并且对于图片,图表、数学式都有支持,许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。
你还不会使用 Markdown?
MarkDown入门MarkDown介绍
MarkDown入门MarkDown介绍
188 0