轻量级图表绘制工具Mermaid使用指南
创作时间:
作者:
@小白创作中心
轻量级图表绘制工具Mermaid使用指南
引用
CSDN
1.
https://m.blog.csdn.net/it_oracle/article/details/145257473
Mermaid是一个轻量级的图表绘制工具,使用简单的Markdown风格语法来创建各种类型的图表和流程图。它常用于文档、技术说明和项目管理中,支持流程图、时序图、甘特图等多种图表类型。
常用图表类型
- 流程图 (Flowchart)
用于表示流程和步骤。
graph TD
A[起点] --> B[步骤1]
B --> C{条件?}
C -->|是| D[步骤2]
C -->|否| E[结束]
- 时序图 (Sequence Diagram)
展示不同参与者之间的交互顺序。
sequenceDiagram
Alice->>Bob: 你好,Bob
Bob-->>Alice: 你好,Alice
Alice->>Bob: 最近怎么样?
Bob-->>Alice: 一切都好,谢谢!
- 甘特图 (Gantt Chart)
用于项目计划和任务管理。
gantt
title 项目计划
dateFormat YYYY-MM-DD
section 设计
概念设计 :done, des1, 2025-01-01, 2025-01-10
初步设计 :active, des2, 2025-01-11, 2025-01-20
section 开发
开发准备 : dev1, 2025-01-21, 2025-02-10
功能开发 : dev2, 2025-02-11, 2025-03-01
- 类图 (Class Diagram)
用于展示类及其关系。
classDiagram
class 动物 {
+名称: String
+年龄: int
+吃饭()
+睡觉()
}
class 狗 {
+品种: String
+叫()
}
动物 <|-- 狗
- 状态图 (State Diagram)
描述状态及其转换。
stateDiagram-v2
[*] --> 空闲
空闲 --> 活动中: 启动
活动中 --> 暂停: 暂停
暂停 --> 活动中: 恢复
活动中 --> 结束: 完成
- 饼图 (Pie Chart)
表示比例数据。
pie
title 人口比例
"亚洲": 60
"非洲": 20
"欧洲": 10
"美洲": 8
"大洋洲": 2
- 实体关系图(ER 图)
用于描述数据库中的表结构以及它们之间的关系
erDiagram
USER {
string name
string email
int age
}
ORDER {
int order_id
string product_name
int quantity
}
USER ||--o| ORDER : places
启动脚本案例
shell脚本
#!/bin/sh
# start 启动 stop 停止 restart 重启 status 状态
AppName=boot.jar
# JVM参数
JVM_OPTS="-Dname=$AppName -Duser.timezone=Asia/Shanghai -Xms512m -Xmx1024m -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryError -XX:+PrintGCDateStamps -XX:+PrintGCDetails -XX:NewRatio=1 -XX:SurvivorRatio=30 -XX:+UseParallelGC -XX:+UseParallelOldGC"
APP_HOME=`pwd`
LOG_PATH=$APP_HOME/logs/$AppName.log
if [ "$1" = "" ];
then
echo -e "\033[0;31m 未输入操作名 \033[0m \033[0;34m {start|stop|restart|status} \033[0m"
exit 1
fi
if [ "$AppName" = "" ];
then
echo -e "\033[0;31m 未输入应用名 \033[0m"
exit 1
fi
function start()
{
PID=`ps -ef |grep java|grep $AppName|grep -v grep|awk '{print $2}'`
if [ x"$PID" != x"" ]; then
echo "$AppName is running..."
else
nohup java $JVM_OPTS -jar $AppName > /dev/null 2>&1 &
echo "Start $AppName success..."
fi
}
function stop()
{
echo "Stop $AppName"
PID=""
query(){
PID=`ps -ef |grep java|grep $AppName|grep -v grep|awk '{print $2}'`
}
query
if [ x"$PID" != x"" ]; then
kill -TERM $PID
echo "$AppName (pid:$PID) exiting..."
while [ x"$PID" != x"" ]
do
sleep 1
query
done
echo "$AppName exited."
else
echo "$AppName already stopped."
fi
}
function restart()
{
stop
sleep 2
start
}
function status()
{
PID=`ps -ef |grep java|grep $AppName|grep -v grep|wc -l`
if [ $PID != 0 ];then
echo "$AppName is running..."
else
echo "$AppName is not running..."
fi
}
case $1 in
start)
start;;
stop)
stop;;
restart)
restart;;
status)
status;;
*)
esac
Mermaid代码
flowchart TD
A[开始] --> B{判断输入参数}
B -->|为空| C[提示未输入操作名]
B -->|不为空| D{判断应用名}
D -->|为空| E[提示未输入应用名]
D -->|不为空| F{判断操作类型}
subgraph 操作类型判断
F -->|start| G[启动应用]
F -->|stop| H[停止应用]
F -->|restart| I[重启应用]
F -->|status| J[检查应用状态]
F -->|其他| K[未知操作]
end
subgraph 启动应用
G --> L{应用是否运行}
L -->|是| M[提示应用已在运行]
L -->|否| N[启动应用]
end
subgraph 停止应用
H --> O{应用是否运行}
O -->|是| P[终止应用进程]
O -->|否| Q[提示应用已停止]
P --> R{应用是否退出}
R -->|是| S[提示应用已退出]
R -->|否| T[等待应用退出]
T --> R
end
subgraph 重启应用
I --> U[停止应用]
U --> V[等待2秒]
V --> W[启动应用]
end
subgraph 检查应用状态
J --> X{应用是否运行}
X -->|是| Y[提示应用正在运行]
X -->|否| Z[提示应用未运行]
end
使用方法
- 在Markdown文件中:许多Markdown编辑器(如GitHub)支持Mermaid语法。只需将Mermaid代码包裹在
mermaid
代码块中。 - 在HTML中:在HTML文件中引入Mermaid库,并使用
<div>
标签并添加class="mermaid"
属性。 - 在文档工具中:GitLab、VS Code(安装Mermaid插件)等工具原生支持Mermaid。
如何开始
- 官方文档:可以在mermaid-js.github.io查看Mermaid的官方文档。
- 在线编辑器:通过Mermaid Live Editor在线尝试Mermaid。
Mermaid是开发者、技术文档编写者以及需要快速高效创建图表的任何人的强大工具。
热门推荐
重庆城市科技学院重点学科名单有哪些(市级)
涨停板学之:如何看懂资金盘面逻辑及复盘过程
打呼很大声要看什么科?打呼很大声怎么改善?
财产转移涉及的法律责任如何分配
《珍珠港》电影中人物的意义及其对电影故事和主题的贡献
基于Barra多因子模型的组合权重优化
仲裁裁决复审:公平与正义的捍卫
丁卯日柱的喜忌详解
卫生间浴室柜高度一般多少,如何选择合适的浴室柜
“百年老药”延缓灵长类衰老的机制揭开
网约车司机的“流水密码”:不同城市收入大揭秘
化学试剂保存八原则
越是不喜欢化妆打扮的女人,越是过得好,原因很简单,不信你看
阀门日常维护指南:从外观到内部的全面检查要点
清华大学贺克斌院士团队:食品系统与气候变化、空气污染的相互作用研究综述
怎么判断社保卡已开通金融功能?详细步骤解析
如何写好一份研究计划?
道家哲学对话会:专家学者共议道家经典国际传播
雅思作文写作时间要求:合理规划,高效表达
什么构成一个好的标志设计?打造标志性品牌的秘诀
俯卧撑每天做多少个有锻炼身体的效果
喝进去的酒,多长时间才能在身体里分解完?
劳动仲裁怎么上诉法院?一文详解上诉流程与劳动关系认定
东北,还能诞生千万人口大市吗?
气胸来势汹汹 胸腔闭式引流术来解救
为孩子选购头盔的门道
《王者荣耀世界》最新评测:画面、战斗与玩法全面解析
笔记本电脑价格全解析:从入门到旗舰,如何选购最适合你的笔记本?
项目管理7个原则内容有哪些
哪些毕业生电影可以帮助大学生做好职业规划?