轻量级图表绘制工具Mermaid使用指南

创作时间:

作者:

@小白创作中心

轻量级图表绘制工具Mermaid使用指南

引用

CSDN

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。