如何建开发手机网站,西安现在可以自由出入吗,兰州七里河,网页版qq登录入口电脑版引言
在使用生成式AI时#xff0c;只要你提出让AI帮你生成mermaid图#xff0c;AI的生成就会出现丰富的图形#xff01;
在现代文档编写中#xff0c;图表的使用不仅能增强文档的可读性#xff0c;还能更直观地表达复杂的概念和流程。Mermaid 作为一款开源的图表绘制工具…
引言
在使用生成式AI时只要你提出让AI帮你生成mermaid图AI的生成就会出现丰富的图形
在现代文档编写中图表的使用不仅能增强文档的可读性还能更直观地表达复杂的概念和流程。Mermaid 作为一款开源的图表绘制工具凭借其简洁的语法和强大的功能逐渐成为技术文档、博客、项目管理等领域的宠儿。本文将详细介绍 Mermaid 的使用方法并推荐一些相关的资源和工具。
Mermaid 是什么
Mermaid 是一个基于 JavaScript 的图表绘制工具它允许用户通过简单的文本语法来创建流程图、序列图、甘特图、类图等多种类型的图表。它的设计理念是让图表的创建变得像编写代码一样简单和直观。
Mermaid 的优势
简洁的语法Mermaid 使用类似 Markdown 的语法易于学习和使用。跨平台兼容可以在任何支持 JavaScript 的环境中运行包括网页、Markdown 编辑器、笔记应用等。多种图表支持支持多种图表类型满足不同场景的需求。开源与社区支持作为开源项目Mermaid 拥有活跃的社区持续更新和改进。
图表类型
Mermaid 支持的图表类型包括但不限于
流程图 (Flowchart)用于展示流程和决策逻辑。序列图 (Sequence Diagram)用于描述对象之间的交互。甘特图 (Gantt Chart)用于项目管理和时间线规划。类图 (Class Diagram)用于展示类之间的关系和结构。状态图 (State Diagram)用于描述系统或对象的状态变化。实体关系图 (ER Diagram)用于数据库设计和数据模型。饼图 (Pie Chart)用于展示数据的比例分布。
集成到 Markdown
Mermaid 可以很容易地集成到 Markdown 中很多 Markdown 编辑器和平台都支持 Mermaid 语法。例如在 StackEdit 中你可以直接使用 Mermaid 语法来绘制图表。
深入使用 Mermaid
流程图
流程图是 Mermaid 中最常用的图表类型之一。下面是一个更复杂的流程图示例
graph TDA[开始] -- B{判断}B --|是| C[操作1]B --|否| D[操作2]C -- E[判断2]D -- EE --|是| F[操作3]E --|否| G[操作4]F -- H[结束]G -- H#mermaid-svg-ewV1WYbtkVoFThfQ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ewV1WYbtkVoFThfQ .error-icon{fill:#552222;}#mermaid-svg-ewV1WYbtkVoFThfQ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ewV1WYbtkVoFThfQ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ewV1WYbtkVoFThfQ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ewV1WYbtkVoFThfQ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ewV1WYbtkVoFThfQ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ewV1WYbtkVoFThfQ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ewV1WYbtkVoFThfQ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ewV1WYbtkVoFThfQ .marker.cross{stroke:#333333;}#mermaid-svg-ewV1WYbtkVoFThfQ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ewV1WYbtkVoFThfQ .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ewV1WYbtkVoFThfQ .cluster-label text{fill:#333;}#mermaid-svg-ewV1WYbtkVoFThfQ .cluster-label span{color:#333;}#mermaid-svg-ewV1WYbtkVoFThfQ .label text,#mermaid-svg-ewV1WYbtkVoFThfQ span{fill:#333;color:#333;}#mermaid-svg-ewV1WYbtkVoFThfQ .node rect,#mermaid-svg-ewV1WYbtkVoFThfQ .node circle,#mermaid-svg-ewV1WYbtkVoFThfQ .node ellipse,#mermaid-svg-ewV1WYbtkVoFThfQ .node polygon,#mermaid-svg-ewV1WYbtkVoFThfQ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ewV1WYbtkVoFThfQ .node .label{text-align:center;}#mermaid-svg-ewV1WYbtkVoFThfQ .node.clickable{cursor:pointer;}#mermaid-svg-ewV1WYbtkVoFThfQ .arrowheadPath{fill:#333333;}#mermaid-svg-ewV1WYbtkVoFThfQ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ewV1WYbtkVoFThfQ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ewV1WYbtkVoFThfQ .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ewV1WYbtkVoFThfQ .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ewV1WYbtkVoFThfQ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ewV1WYbtkVoFThfQ .cluster text{fill:#333;}#mermaid-svg-ewV1WYbtkVoFThfQ .cluster span{color:#333;}#mermaid-svg-ewV1WYbtkVoFThfQ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ewV1WYbtkVoFThfQ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是 否 是 否 开始 判断 操作1 操作2 判断2 操作3 操作4 结束 这个流程图展示了如何处理多个决策点和分支。
序列图
序列图用于展示对象之间的交互。以下是一个简单的序列图示例
sequenceDiagramparticipant Aliceparticipant BobAlice-Bob: Hello Bob, how are you?alt is sickBob-Alice: Not so good :(else is wellBob-Alice: Feeling fresh like a daisyend#mermaid-svg-sF7D9ZW09fVD9eD9 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-sF7D9ZW09fVD9eD9 .error-icon{fill:#552222;}#mermaid-svg-sF7D9ZW09fVD9eD9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sF7D9ZW09fVD9eD9 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-sF7D9ZW09fVD9eD9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sF7D9ZW09fVD9eD9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sF7D9ZW09fVD9eD9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sF7D9ZW09fVD9eD9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sF7D9ZW09fVD9eD9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sF7D9ZW09fVD9eD9 .marker.cross{stroke:#333333;}#mermaid-svg-sF7D9ZW09fVD9eD9 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sF7D9ZW09fVD9eD9 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-sF7D9ZW09fVD9eD9 text.actortspan{fill:black;stroke:none;}#mermaid-svg-sF7D9ZW09fVD9eD9 .actor-line{stroke:grey;}#mermaid-svg-sF7D9ZW09fVD9eD9 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-sF7D9ZW09fVD9eD9 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-sF7D9ZW09fVD9eD9 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-sF7D9ZW09fVD9eD9 .sequenceNumber{fill:white;}#mermaid-svg-sF7D9ZW09fVD9eD9 #sequencenumber{fill:#333;}#mermaid-svg-sF7D9ZW09fVD9eD9 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-sF7D9ZW09fVD9eD9 .messageText{fill:#333;stroke:#333;}#mermaid-svg-sF7D9ZW09fVD9eD9 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-sF7D9ZW09fVD9eD9 .labelText,#mermaid-svg-sF7D9ZW09fVD9eD9 .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-sF7D9ZW09fVD9eD9 .loopText,#mermaid-svg-sF7D9ZW09fVD9eD9 .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-sF7D9ZW09fVD9eD9 .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-sF7D9ZW09fVD9eD9 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-sF7D9ZW09fVD9eD9 .noteText,#mermaid-svg-sF7D9ZW09fVD9eD9 .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-sF7D9ZW09fVD9eD9 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-sF7D9ZW09fVD9eD9 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-sF7D9ZW09fVD9eD9 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-sF7D9ZW09fVD9eD9 .actorPopupMenu{position:absolute;}#mermaid-svg-sF7D9ZW09fVD9eD9 .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-sF7D9ZW09fVD9eD9 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-sF7D9ZW09fVD9eD9 .actor-man circle,#mermaid-svg-sF7D9ZW09fVD9eD9 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-sF7D9ZW09fVD9eD9 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Alice Bob Hello Bob, how are you? Not so good :( Feeling fresh like a daisy alt [is sick] [is well] Alice Bob 这个序列图展示了 Alice 和 Bob 之间的对话包含了条件分支。
甘特图
甘特图在项目管理中非常有用。下面是一个项目时间线的甘特图示例
gantttitle 项目时间线dateFormat YYYY-MM-DDsection 项目阶段需求分析 :done, des1, 2024-12-01, 2024-12-07设计阶段 :active, des2, after des1, 7d开发阶段 : des3, after des2, 14d测试阶段 : des4, after des3, 7d上线准备 : des5, after des4, 3d#mermaid-svg-VQBrghtGCbfaKurI {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-VQBrghtGCbfaKurI .error-icon{fill:#552222;}#mermaid-svg-VQBrghtGCbfaKurI .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-VQBrghtGCbfaKurI .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-VQBrghtGCbfaKurI .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-VQBrghtGCbfaKurI .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-VQBrghtGCbfaKurI .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-VQBrghtGCbfaKurI .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-VQBrghtGCbfaKurI .marker{fill:#333333;stroke:#333333;}#mermaid-svg-VQBrghtGCbfaKurI .marker.cross{stroke:#333333;}#mermaid-svg-VQBrghtGCbfaKurI svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-VQBrghtGCbfaKurI .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-VQBrghtGCbfaKurI .exclude-range{fill:#eeeeee;}#mermaid-svg-VQBrghtGCbfaKurI .section{stroke:none;opacity:0.2;}#mermaid-svg-VQBrghtGCbfaKurI .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-VQBrghtGCbfaKurI .section2{fill:#fff400;}#mermaid-svg-VQBrghtGCbfaKurI .section1,#mermaid-svg-VQBrghtGCbfaKurI .section3{fill:white;opacity:0.2;}#mermaid-svg-VQBrghtGCbfaKurI .sectionTitle0{fill:#333;}#mermaid-svg-VQBrghtGCbfaKurI .sectionTitle1{fill:#333;}#mermaid-svg-VQBrghtGCbfaKurI .sectionTitle2{fill:#333;}#mermaid-svg-VQBrghtGCbfaKurI .sectionTitle3{fill:#333;}#mermaid-svg-VQBrghtGCbfaKurI .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-VQBrghtGCbfaKurI .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-VQBrghtGCbfaKurI .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-VQBrghtGCbfaKurI .grid path{stroke-width:0;}#mermaid-svg-VQBrghtGCbfaKurI .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-VQBrghtGCbfaKurI .task{stroke-width:2;}#mermaid-svg-VQBrghtGCbfaKurI .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-VQBrghtGCbfaKurI .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-VQBrghtGCbfaKurI .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-VQBrghtGCbfaKurI .task.clickable{cursor:pointer;}#mermaid-svg-VQBrghtGCbfaKurI .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-VQBrghtGCbfaKurI .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-VQBrghtGCbfaKurI .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-VQBrghtGCbfaKurI .taskText0,#mermaid-svg-VQBrghtGCbfaKurI .taskText1,#mermaid-svg-VQBrghtGCbfaKurI .taskText2,#mermaid-svg-VQBrghtGCbfaKurI .taskText3{fill:white;}#mermaid-svg-VQBrghtGCbfaKurI .task0,#mermaid-svg-VQBrghtGCbfaKurI .task1,#mermaid-svg-VQBrghtGCbfaKurI .task2,#mermaid-svg-VQBrghtGCbfaKurI .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-VQBrghtGCbfaKurI .taskTextOutside0,#mermaid-svg-VQBrghtGCbfaKurI .taskTextOutside2{fill:black;}#mermaid-svg-VQBrghtGCbfaKurI .taskTextOutside1,#mermaid-svg-VQBrghtGCbfaKurI .taskTextOutside3{fill:black;}#mermaid-svg-VQBrghtGCbfaKurI .active0,#mermaid-svg-VQBrghtGCbfaKurI .active1,#mermaid-svg-VQBrghtGCbfaKurI .active2,#mermaid-svg-VQBrghtGCbfaKurI .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-VQBrghtGCbfaKurI .activeText0,#mermaid-svg-VQBrghtGCbfaKurI .activeText1,#mermaid-svg-VQBrghtGCbfaKurI .activeText2,#mermaid-svg-VQBrghtGCbfaKurI .activeText3{fill:black!important;}#mermaid-svg-VQBrghtGCbfaKurI .done0,#mermaid-svg-VQBrghtGCbfaKurI .done1,#mermaid-svg-VQBrghtGCbfaKurI .done2,#mermaid-svg-VQBrghtGCbfaKurI .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-VQBrghtGCbfaKurI .doneText0,#mermaid-svg-VQBrghtGCbfaKurI .doneText1,#mermaid-svg-VQBrghtGCbfaKurI .doneText2,#mermaid-svg-VQBrghtGCbfaKurI .doneText3{fill:black!important;}#mermaid-svg-VQBrghtGCbfaKurI .crit0,#mermaid-svg-VQBrghtGCbfaKurI .crit1,#mermaid-svg-VQBrghtGCbfaKurI .crit2,#mermaid-svg-VQBrghtGCbfaKurI .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-VQBrghtGCbfaKurI .activeCrit0,#mermaid-svg-VQBrghtGCbfaKurI .activeCrit1,#mermaid-svg-VQBrghtGCbfaKurI .activeCrit2,#mermaid-svg-VQBrghtGCbfaKurI .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-VQBrghtGCbfaKurI .doneCrit0,#mermaid-svg-VQBrghtGCbfaKurI .doneCrit1,#mermaid-svg-VQBrghtGCbfaKurI .doneCrit2,#mermaid-svg-VQBrghtGCbfaKurI .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-VQBrghtGCbfaKurI .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-VQBrghtGCbfaKurI .milestoneText{font-style:italic;}#mermaid-svg-VQBrghtGCbfaKurI .doneCritText0,#mermaid-svg-VQBrghtGCbfaKurI .doneCritText1,#mermaid-svg-VQBrghtGCbfaKurI .doneCritText2,#mermaid-svg-VQBrghtGCbfaKurI .doneCritText3{fill:black!important;}#mermaid-svg-VQBrghtGCbfaKurI .activeCritText0,#mermaid-svg-VQBrghtGCbfaKurI .activeCritText1,#mermaid-svg-VQBrghtGCbfaKurI .activeCritText2,#mermaid-svg-VQBrghtGCbfaKurI .activeCritText3{fill:black!important;}#mermaid-svg-VQBrghtGCbfaKurI .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-VQBrghtGCbfaKurI :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2024-12-01 2024-12-03 2024-12-05 2024-12-07 2024-12-09 2024-12-11 2024-12-13 2024-12-15 2024-12-17 2024-12-19 2024-12-21 2024-12-23 2024-12-25 2024-12-27 2024-12-29 2024-12-31 2025-01-01 2025-01-03 2025-01-05 2025-01-07 需求分析 设计阶段 开发阶段 测试阶段 上线准备 项目阶段 项目时间线 这个甘特图展示了一个项目的时间线帮助团队成员了解项目进度。
类图
类图用于展示类之间的关系和结构。以下是一个简单的类图示例
classDiagramclass Animal {String nameint ageeat()sleep()}class Dog {String breedbark()}Animal |-- Dog#mermaid-svg-8ZnTfrgKu9LHpFgq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8ZnTfrgKu9LHpFgq .error-icon{fill:#552222;}#mermaid-svg-8ZnTfrgKu9LHpFgq .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8ZnTfrgKu9LHpFgq .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8ZnTfrgKu9LHpFgq .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8ZnTfrgKu9LHpFgq .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8ZnTfrgKu9LHpFgq .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8ZnTfrgKu9LHpFgq .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8ZnTfrgKu9LHpFgq .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8ZnTfrgKu9LHpFgq .marker.cross{stroke:#333333;}#mermaid-svg-8ZnTfrgKu9LHpFgq svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8ZnTfrgKu9LHpFgq g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-8ZnTfrgKu9LHpFgq g.classGroup text .title{font-weight:bolder;}#mermaid-svg-8ZnTfrgKu9LHpFgq .nodeLabel,#mermaid-svg-8ZnTfrgKu9LHpFgq .edgeLabel{color:#131300;}#mermaid-svg-8ZnTfrgKu9LHpFgq .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-8ZnTfrgKu9LHpFgq .label text{fill:#131300;}#mermaid-svg-8ZnTfrgKu9LHpFgq .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-8ZnTfrgKu9LHpFgq .classTitle{font-weight:bolder;}#mermaid-svg-8ZnTfrgKu9LHpFgq .node rect,#mermaid-svg-8ZnTfrgKu9LHpFgq .node circle,#mermaid-svg-8ZnTfrgKu9LHpFgq .node ellipse,#mermaid-svg-8ZnTfrgKu9LHpFgq .node polygon,#mermaid-svg-8ZnTfrgKu9LHpFgq .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8ZnTfrgKu9LHpFgq .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq g.clickable{cursor:pointer;}#mermaid-svg-8ZnTfrgKu9LHpFgq g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-8ZnTfrgKu9LHpFgq g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-8ZnTfrgKu9LHpFgq .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-8ZnTfrgKu9LHpFgq .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-8ZnTfrgKu9LHpFgq .dashed-line{stroke-dasharray:3;}#mermaid-svg-8ZnTfrgKu9LHpFgq #compositionStart,#mermaid-svg-8ZnTfrgKu9LHpFgq .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq #compositionEnd,#mermaid-svg-8ZnTfrgKu9LHpFgq .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq #dependencyStart,#mermaid-svg-8ZnTfrgKu9LHpFgq .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq #dependencyStart,#mermaid-svg-8ZnTfrgKu9LHpFgq .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq #extensionStart,#mermaid-svg-8ZnTfrgKu9LHpFgq .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq #extensionEnd,#mermaid-svg-8ZnTfrgKu9LHpFgq .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq #aggregationStart,#mermaid-svg-8ZnTfrgKu9LHpFgq .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq #aggregationEnd,#mermaid-svg-8ZnTfrgKu9LHpFgq .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-8ZnTfrgKu9LHpFgq .edgeTerminals{font-size:11px;}#mermaid-svg-8ZnTfrgKu9LHpFgq :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Animal String name int age eat() sleep() Dog String breed bark() 这个类图展示了 Animal 和 Dog 之间的继承关系。
饼图
饼图用于展示数据的比例分布。以下是一个简单的饼图示例
pietitle 市场份额Chrome : 60Firefox : 20Safari : 10Edge : 5Others : 5#mermaid-svg-v3G8JUul6Xqbisne {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-v3G8JUul6Xqbisne .error-icon{fill:#552222;}#mermaid-svg-v3G8JUul6Xqbisne .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-v3G8JUul6Xqbisne .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-v3G8JUul6Xqbisne .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-v3G8JUul6Xqbisne .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-v3G8JUul6Xqbisne .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-v3G8JUul6Xqbisne .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-v3G8JUul6Xqbisne .marker{fill:#333333;stroke:#333333;}#mermaid-svg-v3G8JUul6Xqbisne .marker.cross{stroke:#333333;}#mermaid-svg-v3G8JUul6Xqbisne svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-v3G8JUul6Xqbisne .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-v3G8JUul6Xqbisne .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-v3G8JUul6Xqbisne .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-v3G8JUul6Xqbisne .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-v3G8JUul6Xqbisne :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 60% 20% 10% 5% 5% 市场份额 Chrome Firefox Safari Edge Others 这个饼图展示了不同浏览器的市场份额。
推荐资源
支持 Mermaid 的笔记本
强烈推荐阅读 oioihoii 的博文其中详细介绍了如何在 StackEdit 中使用 Mermaid。StackEdit 是一个基于浏览器的 Markdown 编辑器支持 Mermaid 语法并且可以将笔记内容存储在 Gitee 或 GitHub 上实现多平台同步和在线共享。
Mermaid 图转 PNG 工具
如果你需要将 Mermaid 图表转换为 PNG 格式可以使用 Min2k 的 Mermaid 图转 PNG 工具。这个工具支持中文输入非常方便。
实践应用
示例项目管理甘特图
gantttitle 项目时间线dateFormat YYYY-MM-DDsection 项目阶段需求分析 :done, des1, 2024-12-01, 2024-12-07设计阶段 :active, des2, after des1, 7d开发阶段 : des3, after des2, 14d测试阶段 : des4, after des3, 7d上线准备 : des5, after des4, 3d#mermaid-svg-vlcGziMSBSKuHKzW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-vlcGziMSBSKuHKzW .error-icon{fill:#552222;}#mermaid-svg-vlcGziMSBSKuHKzW .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vlcGziMSBSKuHKzW .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-vlcGziMSBSKuHKzW .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vlcGziMSBSKuHKzW .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vlcGziMSBSKuHKzW .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vlcGziMSBSKuHKzW .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vlcGziMSBSKuHKzW .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vlcGziMSBSKuHKzW .marker.cross{stroke:#333333;}#mermaid-svg-vlcGziMSBSKuHKzW svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vlcGziMSBSKuHKzW .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-vlcGziMSBSKuHKzW .exclude-range{fill:#eeeeee;}#mermaid-svg-vlcGziMSBSKuHKzW .section{stroke:none;opacity:0.2;}#mermaid-svg-vlcGziMSBSKuHKzW .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-vlcGziMSBSKuHKzW .section2{fill:#fff400;}#mermaid-svg-vlcGziMSBSKuHKzW .section1,#mermaid-svg-vlcGziMSBSKuHKzW .section3{fill:white;opacity:0.2;}#mermaid-svg-vlcGziMSBSKuHKzW .sectionTitle0{fill:#333;}#mermaid-svg-vlcGziMSBSKuHKzW .sectionTitle1{fill:#333;}#mermaid-svg-vlcGziMSBSKuHKzW .sectionTitle2{fill:#333;}#mermaid-svg-vlcGziMSBSKuHKzW .sectionTitle3{fill:#333;}#mermaid-svg-vlcGziMSBSKuHKzW .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-vlcGziMSBSKuHKzW .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-vlcGziMSBSKuHKzW .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-vlcGziMSBSKuHKzW .grid path{stroke-width:0;}#mermaid-svg-vlcGziMSBSKuHKzW .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-vlcGziMSBSKuHKzW .task{stroke-width:2;}#mermaid-svg-vlcGziMSBSKuHKzW .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-vlcGziMSBSKuHKzW .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-vlcGziMSBSKuHKzW .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-vlcGziMSBSKuHKzW .task.clickable{cursor:pointer;}#mermaid-svg-vlcGziMSBSKuHKzW .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-vlcGziMSBSKuHKzW .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-vlcGziMSBSKuHKzW .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-vlcGziMSBSKuHKzW .taskText0,#mermaid-svg-vlcGziMSBSKuHKzW .taskText1,#mermaid-svg-vlcGziMSBSKuHKzW .taskText2,#mermaid-svg-vlcGziMSBSKuHKzW .taskText3{fill:white;}#mermaid-svg-vlcGziMSBSKuHKzW .task0,#mermaid-svg-vlcGziMSBSKuHKzW .task1,#mermaid-svg-vlcGziMSBSKuHKzW .task2,#mermaid-svg-vlcGziMSBSKuHKzW .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-vlcGziMSBSKuHKzW .taskTextOutside0,#mermaid-svg-vlcGziMSBSKuHKzW .taskTextOutside2{fill:black;}#mermaid-svg-vlcGziMSBSKuHKzW .taskTextOutside1,#mermaid-svg-vlcGziMSBSKuHKzW .taskTextOutside3{fill:black;}#mermaid-svg-vlcGziMSBSKuHKzW .active0,#mermaid-svg-vlcGziMSBSKuHKzW .active1,#mermaid-svg-vlcGziMSBSKuHKzW .active2,#mermaid-svg-vlcGziMSBSKuHKzW .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-vlcGziMSBSKuHKzW .activeText0,#mermaid-svg-vlcGziMSBSKuHKzW .activeText1,#mermaid-svg-vlcGziMSBSKuHKzW .activeText2,#mermaid-svg-vlcGziMSBSKuHKzW .activeText3{fill:black!important;}#mermaid-svg-vlcGziMSBSKuHKzW .done0,#mermaid-svg-vlcGziMSBSKuHKzW .done1,#mermaid-svg-vlcGziMSBSKuHKzW .done2,#mermaid-svg-vlcGziMSBSKuHKzW .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-vlcGziMSBSKuHKzW .doneText0,#mermaid-svg-vlcGziMSBSKuHKzW .doneText1,#mermaid-svg-vlcGziMSBSKuHKzW .doneText2,#mermaid-svg-vlcGziMSBSKuHKzW .doneText3{fill:black!important;}#mermaid-svg-vlcGziMSBSKuHKzW .crit0,#mermaid-svg-vlcGziMSBSKuHKzW .crit1,#mermaid-svg-vlcGziMSBSKuHKzW .crit2,#mermaid-svg-vlcGziMSBSKuHKzW .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-vlcGziMSBSKuHKzW .activeCrit0,#mermaid-svg-vlcGziMSBSKuHKzW .activeCrit1,#mermaid-svg-vlcGziMSBSKuHKzW .activeCrit2,#mermaid-svg-vlcGziMSBSKuHKzW .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-vlcGziMSBSKuHKzW .doneCrit0,#mermaid-svg-vlcGziMSBSKuHKzW .doneCrit1,#mermaid-svg-vlcGziMSBSKuHKzW .doneCrit2,#mermaid-svg-vlcGziMSBSKuHKzW .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-vlcGziMSBSKuHKzW .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-vlcGziMSBSKuHKzW .milestoneText{font-style:italic;}#mermaid-svg-vlcGziMSBSKuHKzW .doneCritText0,#mermaid-svg-vlcGziMSBSKuHKzW .doneCritText1,#mermaid-svg-vlcGziMSBSKuHKzW .doneCritText2,#mermaid-svg-vlcGziMSBSKuHKzW .doneCritText3{fill:black!important;}#mermaid-svg-vlcGziMSBSKuHKzW .activeCritText0,#mermaid-svg-vlcGziMSBSKuHKzW .activeCritText1,#mermaid-svg-vlcGziMSBSKuHKzW .activeCritText2,#mermaid-svg-vlcGziMSBSKuHKzW .activeCritText3{fill:black!important;}#mermaid-svg-vlcGziMSBSKuHKzW .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-vlcGziMSBSKuHKzW :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2024-12-01 2024-12-03 2024-12-05 2024-12-07 2024-12-09 2024-12-11 2024-12-13 2024-12-15 2024-12-17 2024-12-19 2024-12-21 2024-12-23 2024-12-25 2024-12-27 2024-12-29 2024-12-31 2025-01-01 2025-01-03 2025-01-05 2025-01-07 需求分析 设计阶段 开发阶段 测试阶段 上线准备 项目阶段 项目时间线 这个甘特图展示了一个项目的时间线帮助团队成员了解项目进度。
示例系统状态图
stateDiagram-v2[*] -- 启动启动 -- 运行中运行中 -- 暂停 : 暂停按钮运行中 -- 停止 : 停止按钮暂停 -- 运行中 : 恢复按钮停止 -- [*]#mermaid-svg-SkecFJJD0qlcBJpS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SkecFJJD0qlcBJpS .error-icon{fill:#552222;}#mermaid-svg-SkecFJJD0qlcBJpS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SkecFJJD0qlcBJpS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SkecFJJD0qlcBJpS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SkecFJJD0qlcBJpS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SkecFJJD0qlcBJpS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SkecFJJD0qlcBJpS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SkecFJJD0qlcBJpS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SkecFJJD0qlcBJpS .marker.cross{stroke:#333333;}#mermaid-svg-SkecFJJD0qlcBJpS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SkecFJJD0qlcBJpS defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-SkecFJJD0qlcBJpS g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-SkecFJJD0qlcBJpS g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-SkecFJJD0qlcBJpS g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-SkecFJJD0qlcBJpS g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-SkecFJJD0qlcBJpS g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-SkecFJJD0qlcBJpS .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-SkecFJJD0qlcBJpS .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-SkecFJJD0qlcBJpS .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-SkecFJJD0qlcBJpS .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-SkecFJJD0qlcBJpS .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-SkecFJJD0qlcBJpS .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-SkecFJJD0qlcBJpS .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-SkecFJJD0qlcBJpS .edgeLabel .label text{fill:#333;}#mermaid-svg-SkecFJJD0qlcBJpS .label div .edgeLabel{color:#333;}#mermaid-svg-SkecFJJD0qlcBJpS .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-SkecFJJD0qlcBJpS .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-SkecFJJD0qlcBJpS .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-SkecFJJD0qlcBJpS .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-SkecFJJD0qlcBJpS .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-SkecFJJD0qlcBJpS .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-SkecFJJD0qlcBJpS .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-SkecFJJD0qlcBJpS #statediagram-barbEnd{fill:#333333;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-SkecFJJD0qlcBJpS .cluster-label,#mermaid-svg-SkecFJJD0qlcBJpS .nodeLabel{color:#131300;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-SkecFJJD0qlcBJpS .note-edge{stroke-dasharray:5;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-note text{fill:black;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram-note .nodeLabel{color:black;}#mermaid-svg-SkecFJJD0qlcBJpS .statediagram .edgeLabel{color:red;}#mermaid-svg-SkecFJJD0qlcBJpS #dependencyStart,#mermaid-svg-SkecFJJD0qlcBJpS #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-SkecFJJD0qlcBJpS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 暂停按钮 停止按钮 恢复按钮 启动 运行中 暂停 停止 这个状态图展示了一个系统的基本状态转换。
结论
Mermaid 不仅简化了图表的创建过程还增强了文档的表达能力。无论你是技术文档作者、项目经理还是博主Mermaid 都能为你的工作带来便利和效率。通过本文推荐的资源和工具你可以更深入地探索和应用 Mermaid提升文档的专业性和可读性。
参考文献
Mermaid 官方文档StackEdit 官方网站Min2k 的 Mermaid 图转 PNG 工具
希望这篇博客能为你提供有价值的信息欢迎在评论区分享你的使用心得或问题。
