查看原文
其他

63k+ stars 文本驱动的图表生成工具,开源轻量级!

小奇 爱编程爱技术
2024-08-23
Mermaid是一个基于JavaScript 的开源绘图和制图工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
Mermaid 甚至能让非程序员也能通过 Mermaid Live Editor 轻松创建详细的图表。Mermaid 图表可以嵌入到网页、Markdown 文件或其他支持 Mermaid 的环境中,并且无需使用图形界面工具即可快速创建图表。

Doc-Rot 是 Mermaid 致力于解决的一个难题。通过简单的文本描述来创建各种类型的图表,包括流程图、序列图、甘特图、类图等。

🎨️ 功能特性

  • 开源、免费跨、平台
  • 简单易用
  • 采用直观的文本描述语法,创建图表简单易懂
  • 支持多种图表类型,如流程图、序列图、甘特图、类图、饼图等
  • 适合不同的应用场景
  • 无需复杂的代码或图形设计技能。
  • 支持嵌入到网页、Markdown文件、Confluence等环境中

🔥 示例

下面是一些使用 Mermaid 创建的图表示例:

1、流程图
flowchart LRA[Hard] -->|Text| B(Round)B --> C{Decision}C -->|One| D[Result 1]C -->|Two| E[Result 2]
2、时序图
sequenceDiagramAlice->>John: Hello John, how are you?loop Healthcheck John->>John: Fight against hypochondriaendNote right of John: Rational thoughts!John-->>Alice: Great!John->>Bob: How about you?Bob-->>John: Jolly good!
3、甘特图
gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

4、类图
classDiagramClass01 <|-- AveryLongClass : Cool<<Interface>> Class01Class09 --> C2 : Where am I?Class09 --* C3Class09 --|> Class07Class07 : equals()Class07 : Object[] elementDataClass01 : size()Class01 : int chimpClass01 : int gorillaclass Class10 { <<service>> int id size()}

5、状态图
stateDiagram-v2[*] --> StillStill --> [*]Still --> MovingMoving --> StillMoving --> CrashCrash --> [*]
6、饼图
pie"Dogs" : 386"Cats" : 85"Rats" : 15

7、Git 图-用户体验旅程图
journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me

附项目的链接:

开源地址:https://github.com/mermaid-js/mermaid
官网:http://mermaid.js.org
使用手册:
http://mermaid.js.org/intro
在线体验地址:https://mermaid.live

点关注不迷路

本文发表于公众号【爱编程爱技术
关注我们,阅读更多精彩内容


往期推荐:

16K+ 开源免费的外文阅读辅助工具,复制即翻译
7.7k stars 快速生成短链接,开源免费!
13k+ Stars 开源免费的 Github 加速器,突破地域限制!
tabler:36k+ stars 免费开源的仪表盘工具包!
13K+ Stars 开源、高颜值的影视软件发布更新!

继续滑动看下一个
爱编程爱技术
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存