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

目录
打赏
0
0
0
0
27
分享
相关文章
|
2月前
|
全平台免费的在线笔记本(支持markdown、mermaid)
StackEdit是一款基于浏览器的Markdown编辑器,支持跨平台使用,无需安装,可将笔记存储在gitee、github等平台上。其优势包括内容安全免费、多平台同步、离线可用、支持UML图和流程图绘制等。通过简单的步骤即可完成注册、登录和笔记创作,并能轻松实现在线共享。
520 0
想有自己的博客吗?浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
想有自己的博客吗?浏览器支持 MarkDown和语法高亮的最简单示例(使用markdown-it、highlight.js和mermaid)
markdown绘图插件----mermaid简介
作者:黄永刚 mermaid简介 当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样。
3481 0
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
351 1
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
226 1
Linux系统之部署轻量级Markdown文本编辑器
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
190 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
241 0
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
168 4

热门文章

最新文章