狂揽 79k star！GitHub 官方支持的图表自动化神器，太好用了，好用到抽耳光都不愿放手

— 特色专栏 —

MySQL / PostgreSQL / MongoDB

ElasticSearch / Hadoop / Redis

Kubernetes / Docker / DevOps

Kafka / RabbitMQ / Zookeeper

监控平台 / 应用与服务 / 集群管理

Nginx / Git / Tools / OpenStack

‌大家好，我是民工哥！

对于从事IT工作的我们来说，画图技能是必备的。

比如，我们有时候需要写项目文档会用到流程图、甘特图，写软件运维文档需要逻辑架构图等等。因此，一款好用且功能强大的工具是至关重要的，它能极大提高我们的工作效率。

今天，给大家推荐一款 Github 官方都支持的画图工具：Mermaid，它能让你像使用 Markdown 一样轻松画出你所需的图。

狂揽 79k star！GitHub 官方支持的图表自动化神器，太好用了，好用到抽耳光都不愿放手。

简介

Mermaid 是一款基于 JavaScript 的开源图表生成工具，通过简洁的文本语法（类似 Markdown）快速创建流程图、时序图、甘特图、类图、状态图等十余种专业图表，广泛应用于技术文档编写、项目管理和系统架构可视化场景。

核心特性

Markdown 原生支持，告别二进制依赖

Mermaid 通过类 Markdown 语法（如 graph TD; A-->B）定义图表，直接嵌入 .md 文件后，可随代码一同提交至 Git 仓库。图表内容以纯文本形式存储，支持 git diff 追踪变更，彻底解决传统工具（如 Visio、Draw.io）生成的二进制文件无法合并冲突的问题。

动态渲染，文档与代码同步进化

在支持 JavaScript 的环境（如 GitHub、GitLab、VS Code）中，Mermaid 代码块可实时渲染为交互式图表。当开发流程调整时，仅需修改文本语法，图表自动更新，避免人工维护多版本图表的冗余工作。

开发者友好，学习成本趋近于零

其语法与 Markdown 高度一致，开发者无需学习复杂工具界面。例如，流程图节点通过 []（方框）、()（圆角框）、{}（菱形）区分，箭头方向用 -->、--- 等符号控制，符合代码书写直觉。

跨平台兼容

浏览器端通过 CDN 引入 mermaid.min.js 即可在网页中渲染图表。VS Code 插件（如 Markdown Preview Mermaid Support）支持实时预览，GitHub/GitLab 原生支持 Mermaid 代码块渲染。Docusaurus、Hexo 等可通过插件嵌入 Mermaid 图表。

安装

Mermaid 也可以在浏览器中直接使用的，当然你也可以通过 Node.js 或者使用其它方式（docker）进行安装。

如果你想在浏览器中使用，只需要引入下面的 Mermaid 的脚本文件：

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

Node.js 安装命令

npm install mermaid

Docker 安装命令

docker pull ghcr.io/mermaid-js/mermaid-live-editor

docker run -p 8000:8080 --name mermaid-live-editor \
-d ghcr.io/mermaid-js/mermaid-live-editor

安装完成之后，我们可以通过访问：http://server_ip:8000 在线使用它。

一个简单的示例如下：

graph TD; 
A-->B; 
A-->C; 

生成的图开如下：

示例界面展示

系统架构图

c4Diagram
  Container(api, "API 服务", "Spring Boot", "提供 RESTful 接口")
  Container(db, "数据库", "MySQL", "存储业务数据")
  Rel(api, db, "读写", "JDBC")

架构设计与 API 文档

sequenceDiagram
    participant Client
    participant AuthServer
    Client->>AuthServer: 发送授权码请求
    AuthServer-->>Client: 返回 token

项目管理与进度跟踪

gantt
    title 项目里程碑
    dateFormat  YYYY-MM-DD
    section 开发
    前端开发       :a1, 2025-05-01, 14d
    后端开发       :after a1, 21d

技术博客文章

stateDiagram-v2
    [*] --> 初始化
    初始化 --> 监听命令: WATCH 执行
    监听命令 --> 执行事务: MULTI/EXEC

算法流程图

graph TD
  A[开始] --> B{数组长度 > 1?}
  B -->|是| C[选择基准值]
  B -->|否| Z[结束]
  C --> D[分区操作]
  D --> B

思维导图

git流程图

数据分析图

更多相关的功能与使用技巧，大家可以自行去体验。

结语

Mermaid 的核心价值在于将复杂图表的创作与维护简化为“文本即图形”的协作范式，通过轻量化语法与跨场景兼容性，重新定义了技术文档与可视化沟通的效率边界。

总体来说，Mermaid 是一款功能强大的图形化语言，也是一款备受欢迎的、简单易用的理想工具。

项目地址：https://github.com/mermaid-js/mermaid

👍 如果你喜欢这篇文章，请点赞并分享给你的朋友！