Mermaid（JS库）学习

Mermaid 学习

1. 指导文档

https://mermaid.js.org/intro/n00b-syntaxReference.html

2. 画图模板

2.1 流程图

Text
One
Two
Hard
Round
Decision
Result 1
Result 2

2.2 时序图

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

2.3 甘特图

2014-01-062014-01-062014-01-072014-01-072014-01-082014-01-082014-01-092014-01-092014-01-10Completed Parallel 1 Parallel 2 Active Parallel 3 Parallel 4 Section

2.4 类图

Cool
Where am I?
«Interface»
Class01
int chimp
int gorilla
size()
AveryLongClass
Class09
C2
C3
Class07
Object[] elementData
equals()
«service»
Class10
int id
size()

2.5 状态图

Still
Moving
Crash

2.6 饼图

79%17%3%DogsCatsRats

2.7 git图

CatMe
Go to work
Go to workMe
Make tea
Make teaMe
Go upstairs
Go upstairsMeCat
Do work
Do work
Go home
Go homeMe
Go downstairs
Go downstairsMe
Sit down
Sit downMy working day

2.8 C4 图

<<person>>Banking Customer AA customer of the bank, with personal bank accounts.<<person>>Banking Customer B<<external_person>>Banking Customer C<<system>>Internet Banking SystemAllows customers to view information about their bank accounts, and make payments.<<person>>Banking Customer DA customer of the bank, with personal bank accounts.<<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.BankBoundary2[ENTERPRISE]<<system_queue>>Banking System F QueueA system of the bank, with personal bank accounts.<<external_system_queue>>Banking System G QueueA system of the bank, with personal bank accounts.BankBoundary3[boundary]BankBoundary[ENTERPRISE]UsesUsesSends e-mails[SMTP]Sends e-mails toSystem Context diagram for Internet Banking System
posted @   爱新觉罗LQ  阅读(163)  评论(0)  编辑  收藏  举报
相关博文：
· mermaid 美人鱼【本质：开源的 JS 库】
· Typora 适配高版本 Mermaid
· Markdown 图表
· 用Mermaid画图
· markdown之mermaid
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛