©️ OverlookArt
首页 / Markdown / Mermaid 图表

Mermaid 图表

Mermaid 简介

Mermaid JS 是一款用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成在许多 Markdown 应用中。

这是一个基于JavaScript的图表和图表工具,可以渲染受Markdown启发的文本定义,以动态创建和修改图表。

图表类型

Flowchart 流程图

A

B

C

D


Pie chart 饼图

79%17%3%Pets adopted by volunteersDogsCatsRats

Sequence diagram 序列图

JohnBobAliceJohnBobAliceloop[Healthcheck]Rational thoughts prevail!Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!

Gantt diagram 甘特图

2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-212014-01-23Completed task Active task Future task Future task2 A sectionAdding GANTT diagram to mermaid

State diagrams 状态图

Still

Moving

Crash


Class diagram 类图

Cool

Where am i?

Cool label

Class01

int chimp

int gorilla

size()

AveryLongClass

Class03

Class04

Class05

Class06

Class07

Object[] elementData

equals()

Class08

Class09

C2

C3


Git graph

maindevelop0-5d28bdb1-29144572-ba59eb63-d99cc084-94b62565-be481c36-402a705

Entity Relationship Diagrams 实体-关系模型

places

contains

uses

CUSTOMER

ORDER

LINE-ITEM

DELIVERY-ADDRESS


Requirement Diagram 需求图

<<satisfies>>

<<Requirement>>

test_req

Id: 1

Text: the test text.

Risk: High

Verification: Test

<<Element>>

test_entity

Type: simulation


User Journey Diagram 用户旅程表

CatMe
Go to work
Go to work
Me
Make tea
Make tea
Me
Go upstairs
Go upstairs
MeCat
Do work
Do work
Go home
Go home
Me
Go downstairs
Go downstairs
Me
Sit down
Sit down
My working day

Timeline Diagram

2002LinkedIn2004FacebookGoogle2005Youtube2006TwitterHistory of Social Media Platform

Mindmap

mindmapOriginsResearchToolsLong history
PopularisationOn effectivenessand featuresOn Automatic creationPen and paperMermaidBritish popular psychologyauthor Tony BuzanUsesCreative techniquesStrategic planningArgument mapping

C4 Diagrams

SystemDb_Ext(SystemE, &#34;Mainframe Banking System&#34;, &#34;Stores all of the core banking information about customers, accounts, transactions, etc.&#34;)

System_Boundary(b2, &#34;BankBoundary2&#34;) {
  System(SystemA, &#34;Banking System A&#34;)
  System(SystemB, &#34;Banking System B&#34;, &#34;A system of the bank, with personal bank accounts. next line.&#34;)
}

System_Ext(SystemC, &#34;E-mail system&#34;, &#34;The internal Microsoft Exchange e-mail system.&#34;)
SystemDb(SystemD, &#34;Banking System D Database&#34;, &#34;A system of the bank, with personal bank accounts.&#34;)

Boundary(b3, &#34;BankBoundary3&#34;, &#34;boundary&#34;) {
  SystemQueue(SystemF, &#34;Banking System F Queue&#34;, &#34;A system of the bank.&#34;)
  SystemQueue_Ext(SystemG, &#34;Banking System G Queue&#34;, &#34;A system of the bank, with personal bank accounts.&#34;)
}
<<person>>Banking Customer AA customer of the bank, with personal bank accounts.<<person>>Banking Customer B<<external_person>>Banking Customer Cdesc<<person>>Banking Customer DA customer of the bank, with personal bank accounts.<<system>>Internet Banking SystemAllows customers to view information about their bank accounts, and make payments.<<external_system_db>>Mainframe Banking SystemStores all of the core banking information about customers, accounts, transactions, etc.<<external_system>>E-mail systemThe internal Microsoft Exchange e-mail system.<<system_db>>Banking System D DatabaseA system of the bank, with personal bank accounts.<<system>>Banking System A<<system>>Banking System BA system of the bank, with personal bank accounts. next line.BankBoundary2[SYSTEM]<<system_queue>>Banking System F QueueA system of the bank.<<external_system_queue>>Banking System G QueueA system of the bank, with personal bank accounts.BankBoundary3[boundary]BankBoundary[ENTERPRISE]BankBoundary0[ENTERPRISE]UsesUsesSends e-mails[SMTP]Sends e-mails toSystem Context diagram for Internet Banking System

Mermaid语法

流程图

关键词

graph

方向词

TB 从上到下
BT 从下到上
LR 从左到右
RL 从右到左

节点形状

[矩形]
[]

序列图

关键词 sequenceDiagram

甘特图

关键词 gantt

饼状图

关键词 pie

80%20%231123

类图

关键词 classDiagram

状态图

关键词 stateDiagram

路程图

关键词 journey