【工具】轻量级的图表绘制工具-Mermaid介绍

原创已于 2025-01-20 11:06:26 修改 · 2.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#工具 #流程图

于 2025-01-20 11:05:32 首次发布

工具专栏收录该内容

2 篇文章

订阅专栏

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。