Mermaid (美人鱼) 一个JS 渲染的图表工具
myzbx 2025-05-28 19:14 30 浏览
Mermaid 是一种基于 JavaScript 的图表和图表工具，它使用受 Markdown 启发的文本定义和渲染器来创建和修改复杂的图表。Mermaid 的主要目的是帮助文档跟上开发。
图表和文档编制会花费开发人员宝贵的时间，并且很快就会过时。但是没有图表或文档会破坏生产力并损害组织学习。
Mermaid 通过使用户能够创建易于修改的图表来解决这个问题，它也可以成为生产脚本（和其他代码）的一部分。
Mermaid 甚至允许非程序员通过 Mermaid Live Editor 轻松创建详细的图表。
之前主要关注Plantuml 进行时序图和状态图的绘制。下面进行一下对比：
Mermaid 和Plantuml 绘制图上的相同与不同，以及相关的优缺点。
1. 相同点
- 基本目标
- 都是用于创建软件工程图表的文本描述语言
- 都支持多种类型的图表（流程图、序列图、类图等）
- 都遵循"代码即图表"的理念
- 使用场景
- 软件文档生成
- 技术方案设计
- 流程说明
- 系统架构图
- 版本控制友好
- 都使用纯文本格式
- 易于进行版本控制
- 支持差异对比
2. 不同点
2.1 技术实现
- Mermaid
- 基于 JavaScript/D3.js
- 在浏览器端直接渲染
- 不需要额外的服务器支持
- PlantUML
- 基于 Java
- 需要Graphviz 支持
- 需要服务器端渲染
2.2 语法特点
- Mermaid
- 语法更简洁直观
- 学习曲线较平缓
- 配置选项相对较少
- PlantUML
- 语法更严格和完整
- 学习曲线较陡峭
- 提供更多细节配置选项
2.3 图表类型支持
- Mermaid
- 流程图
- 序列图
- 甘特图
- 类图
- 状态图
- 饼图
- Git图
- 用户旅程图
- PlantUML
- 所有 Mermaid 支持的图表类型
- 用例图
- 组件图
- 对象图
- 定时图
- 网络图
- 线框图
- 架构图
3. 优缺点分析
Mermaid 优点
- 部署简单，只需引入 JavaScript 库
- 浏览器端渲染，无需服务器
- 语法简单直观
- 与现代开发工具集成度高
- 适合快速原型设计
Mermaid 缺点
- 图表类型相对较少
- 复杂图表的渲染效果可能不够理想
- 自定义样式选项较少
- 大型图表性能可能受限
PlantUML 优点
- 功能更全面，支持更多图表类型
- 渲染质量更高
- 更强的样式自定义能力
- 适合复杂系统设计
- 输出格式多样（PNG、SVG、PDF等）
PlantUML 缺点
- 需要额外的环境配置
- 部署相对复杂
- 学习曲线陡峭
- 需要服务器支持
4. 选择建议
- 选择 Mermaid 的场景
- 需要快速创建简单图表
- 主要在Web 环境中使用
- 团队成员编程经验参差不齐
- 需要集成到 Markdown 文档中
- 不需要复杂的图表类型
- 选择 PlantUML 的场景
- 需要创建复杂的系统设计图
- 对图表质量要求较高
- 需要详细的 UML 图表
- 团队成员具有较强的技术背景
- 需要多种输出格式
流程图：
时序图：
甘特图：
类图：
相关推荐
- 大白话讲nnvm（大白话讲解什么是卷积）
-
之前工作经验中，在某大厂，开发过机器学习框架，在和业务同学的合作下，取得还可以的成绩，但是一直觉得缺少了什么，最近在刷ai-system相关的公开课，才明白计算图的重要性，以往觉得不能理解的东西，现在...
- Python之Json模块详解（python.json()用法）
-
Step1：Json是什么JSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式。具有数据格式简单，读写方便易懂等很多优点。许多主流的编程语言都...
- 最新潮最流行的影音资源——MAU影视
-
MAO影视,一款完全免费的影视软件，为您带来最新潮最流行的影音资源，软件本身并不具备任何资源，只是作为一款播放器提供给大家。配合相关的接口链接，即可为您呈现丰富多彩的影音节目。软件版本支持：1.安卓2...
- Python版的迷你程序——json文件转换为csv
-
浅话C语言是过去几十年软件和硬件两个阵营之间，签署的最坚实的契约。硬件为C语言的语义提供了最能发挥其性能的基础构件，而软件虽然搞了很多的圆环套圆环般的层次，但最终都以C语言作为最后的沉淀收尾。----...
- 没硬盘、网盘也能看片自由!NAS一键部署MoonTV，随时随地爽看。
-
本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：羊刀仙有没有一个应用服务，能满足既没有足够预算购置硬盘，也不想依托网盘的朋友的家庭观影需求？之前我介绍过LibreTV，本篇再来看看另一个更...
- 用云存储30分钟快速搭建APP，你信吗?
-
背景不管你承认与否，移动互联的时代已经到来，这是一个移动互联的时代，手机已经是当今世界上引领潮流的趋势，大型的全球化企业和中小企业都把APP程序开发纳入到他们的企业发展策略当中。但随着手机APP上传的...
- Python的dict和json区别（python中dict的特点）
-
大家有没有发现，python中的字典类型的数据结构，和我们目前比较流行的web端的json格式，非常类似，几乎有点分不清了。那么这2者的区别是什么呢？首先，从概念上，我们要理解这2者是截然不同的。py...
- 越晚搞懂 MySQL JSON 数据类型，你就越吃亏
-
作者介绍陈臣，甲骨文MySQL首席解决方案工程师，公众号《MySQL实战》作者，有大规模的MySQL，Redis，MongoDB，ES的管理和维护经验，擅长MySQL数据库的性能优化及日常操作的原理剖...
- 揭秘你不会画“信息结构图”的本质
-
编辑导语：产品信息结构图有助于清晰地展示产品信息，一定程度上可以为后台上传数据提供依据，但不少人可能觉得产品信息结构图很难，这可能是对数据库表结构不理解等因素导致的。本篇文章里，作者就产品信息结构图的...
- python之json基本操作（.json python）
-
1.概述JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，它具有简洁、清晰的层次结构，易于阅读和编写，还可以有效的提升网络传输效率。Python标准库的...
- JWT 和 JJWT 还傻傻的分不清吗（jwt jti）
-
JWTs是JSON对象的编码表示。JSON对象由零或多个名称/值对组成，其中名称为字符串，值为任意JSON值。JWT有助于在clear(例如在URL中)发送这样的信息，可以被信任为不可读(即加密的)、...
- 比json快20-100倍!protobuf原理深入剖析
-
一、protobuf语法指南1.1定义一个消息类型先来看一个非常简单的例子。假设你想定义一个“搜索请求”的消息格式，每一个请求含有一个查询字符串、你感兴趣的查询结果所在的页数，以及每一页多少条查询结...
- 了解一下ProtoBuf（了解一下相亲对象的年龄）
-
序列化与反序列化我们在进行网络通信调用的时候，总是需要将内存的数据块经过序列化，转换成为一种可以通过网络流进行传输的格式。而这种格式在经过了传输之后再经过序列化，能还原成我们预想中的数据结构。那么我们...
- JSON数据类型详细总结（json数据类型详细总结怎么写）
-
JSON详解一、JSON的概述及其使用JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它基于javascript的一个子集。JSON是的数据交换语言，易...
- 接口自动化测试之JSON Schema模式该如何使用?
-
JSONSchema模式是一个词汇表，可用于注释和验证JSON文档。在实际工作中，对接口返回值进行断言校验，除了常用字段的断言检测以外，还要对其他字段的类型进行检测。对返回的字段一个个写断言显...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)