怎么制作网站源码,医疗器械网站前置审批,陕西省建设银行分行网站,好用的cms系统Mermaid使用教程#xff08;绘制各种图#xff09; 文章目录 Mermaid使用教程#xff08;绘制各种图#xff09;简介饼状图简单的例子应用案例 序列图简单案例应用案例另一个应用案例 甘特图简单案例应用案例一个更为复杂的应用案例 Git图简单案例 总结 简介
本文将主要介…Mermaid使用教程绘制各种图 文章目录 Mermaid使用教程绘制各种图简介饼状图简单的例子应用案例 序列图简单案例应用案例另一个应用案例 甘特图简单案例应用案例一个更为复杂的应用案例 Git图简单案例 总结 简介
本文将主要介绍使用Mermaid绘制各种各样的常用的图例如饼状图、序列图、甘特图等等当然Mermaid也可以用来绘制流程图可以参见我的另一篇文章
https://blog.csdn.net/m0_54218263/article/details/135684176
饼状图
Mermaid 是一个用于生成图表和流程图的 JavaScript 库它使用 Markdown 语法进行绘图。要在 Mermaid 中绘制饼状图可以使用以下语法
graph TDA[饼状图] -- B[部分1]A -- C[部分2]A -- D[部分3]B -- E[子部分1]C -- F[子部分2]D -- G[子部分3]在上面的代码中A 是整个饼状图的名称B、C 和 D 是饼状图中的各个部分E、F 和 G 是各部分下的子部分。使用箭头 (--) 表示各部分之间的依赖关系。
您可以在代码中添加样式和颜色以自定义饼状图的外观。例如您可以使用以下语法为每个部分添加不同的颜色
graph TDA[饼状图] -- B[部分1 : red]A -- C[部分2 : green]A -- D[部分3 : blue]B -- E[子部分1 : red]C -- F[子部分2 : green]D -- G[子部分3 : blue]在上面的代码中: red、: green 和 : blue 是用于指定各部分颜色的样式。您可以根据需要自定义颜色和其他样式。
简单的例子
mermaid的代码如下所示
pietitle Example Pie ChartFirst slice: 30Second slice: 20Third slice: 50生成的效果 #mermaid-svg-k5eX3K0EoN4op1e3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-k5eX3K0EoN4op1e3 .error-icon{fill:#552222;}#mermaid-svg-k5eX3K0EoN4op1e3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-k5eX3K0EoN4op1e3 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-k5eX3K0EoN4op1e3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-k5eX3K0EoN4op1e3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-k5eX3K0EoN4op1e3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-k5eX3K0EoN4op1e3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-k5eX3K0EoN4op1e3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-k5eX3K0EoN4op1e3 .marker.cross{stroke:#333333;}#mermaid-svg-k5eX3K0EoN4op1e3 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-k5eX3K0EoN4op1e3 .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-k5eX3K0EoN4op1e3 .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-k5eX3K0EoN4op1e3 .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-k5eX3K0EoN4op1e3 .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-k5eX3K0EoN4op1e3 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 30% 20% 50% Example Pie Chart First slice Second slice Third slice 应用案例
mermaid的代码如下所示
%%{init: {pie: {textPosition: 0.5}, themeVariables: {pieOuterStrokeWidth: 5px}} }%%
pie showDatatitle Key elements in Product XCalcium : 42.96Potassium : 50.05Magnesium : 10.01Iron : 5生成的效果 #mermaid-svg-pBlWkyJ7eZLafoml {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pBlWkyJ7eZLafoml .error-icon{fill:#552222;}#mermaid-svg-pBlWkyJ7eZLafoml .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pBlWkyJ7eZLafoml .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-pBlWkyJ7eZLafoml .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pBlWkyJ7eZLafoml .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pBlWkyJ7eZLafoml .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pBlWkyJ7eZLafoml .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pBlWkyJ7eZLafoml .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pBlWkyJ7eZLafoml .marker.cross{stroke:#333333;}#mermaid-svg-pBlWkyJ7eZLafoml svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pBlWkyJ7eZLafoml .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-pBlWkyJ7eZLafoml .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-pBlWkyJ7eZLafoml .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-pBlWkyJ7eZLafoml .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-pBlWkyJ7eZLafoml :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 40% 46% 9% 5% Key elements in Product X Calcium [42.96] Potassium [50.05] Magnesium [10.01] Iron [5] 序列图
Mermaid 是一个用于生成图表和流程图的 JavaScript 库它使用 Markdown 语法进行绘图。要在 Mermaid 中生成序列图可以使用以下语法
graph LRA[开始] -- B[步骤1]B -- C[步骤2]C -- D[步骤3]D -- E[结束]在上面的代码中A 是序列图的起点E 是终点B、C 和 D 是序列图中的各个步骤。使用箭头 (--) 表示各步骤之间的依赖关系。
您可以在代码中添加样式和注释以自定义序列图的外观和描述。例如您可以使用以下语法为每个步骤添加样式和注释
graph LRA[开始] -- B[步骤1 : 这是一个注释]B -- C[步骤2 : 这是另一个注释]C -- D[步骤3]D -- E[结束]在上面的代码中: 这是一个注释 和 : 这是另一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。
简单案例
mermaid代码
sequenceDiagramA-B: Message 1B--A: Message 2效果 #mermaid-svg-v4UxN7C96uvSie1y {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-v4UxN7C96uvSie1y .error-icon{fill:#552222;}#mermaid-svg-v4UxN7C96uvSie1y .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-v4UxN7C96uvSie1y .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-v4UxN7C96uvSie1y .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-v4UxN7C96uvSie1y .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-v4UxN7C96uvSie1y .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-v4UxN7C96uvSie1y .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-v4UxN7C96uvSie1y .marker{fill:#333333;stroke:#333333;}#mermaid-svg-v4UxN7C96uvSie1y .marker.cross{stroke:#333333;}#mermaid-svg-v4UxN7C96uvSie1y svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-v4UxN7C96uvSie1y .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-v4UxN7C96uvSie1y text.actortspan{fill:black;stroke:none;}#mermaid-svg-v4UxN7C96uvSie1y .actor-line{stroke:grey;}#mermaid-svg-v4UxN7C96uvSie1y .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-v4UxN7C96uvSie1y .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-v4UxN7C96uvSie1y #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-v4UxN7C96uvSie1y .sequenceNumber{fill:white;}#mermaid-svg-v4UxN7C96uvSie1y #sequencenumber{fill:#333;}#mermaid-svg-v4UxN7C96uvSie1y #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-v4UxN7C96uvSie1y .messageText{fill:#333;stroke:#333;}#mermaid-svg-v4UxN7C96uvSie1y .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-v4UxN7C96uvSie1y .labelText,#mermaid-svg-v4UxN7C96uvSie1y .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-v4UxN7C96uvSie1y .loopText,#mermaid-svg-v4UxN7C96uvSie1y .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-v4UxN7C96uvSie1y .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-v4UxN7C96uvSie1y .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-v4UxN7C96uvSie1y .noteText,#mermaid-svg-v4UxN7C96uvSie1y .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-v4UxN7C96uvSie1y .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-v4UxN7C96uvSie1y .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-v4UxN7C96uvSie1y .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-v4UxN7C96uvSie1y .actorPopupMenu{position:absolute;}#mermaid-svg-v4UxN7C96uvSie1y .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-v4UxN7C96uvSie1y .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-v4UxN7C96uvSie1y .actor-man circle,#mermaid-svg-v4UxN7C96uvSie1y line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-v4UxN7C96uvSie1y :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} A B Message 1 Message 2 A B 应用案例
代码
sequenceDiagramparticipant Aliceparticipant BobAlice-John: Hello John, how are you?loop HealthcheckJohn-John: Fight against hypochondriaendNote right of John: Rational thoughts br/prevail!John--Alice: Great!John-Bob: How about you?Bob--John: Jolly good!效果 #mermaid-svg-1dT1ZKvDzkdD3sGF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1dT1ZKvDzkdD3sGF .error-icon{fill:#552222;}#mermaid-svg-1dT1ZKvDzkdD3sGF .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-1dT1ZKvDzkdD3sGF .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-1dT1ZKvDzkdD3sGF .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-1dT1ZKvDzkdD3sGF .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-1dT1ZKvDzkdD3sGF .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-1dT1ZKvDzkdD3sGF .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-1dT1ZKvDzkdD3sGF .marker{fill:#333333;stroke:#333333;}#mermaid-svg-1dT1ZKvDzkdD3sGF .marker.cross{stroke:#333333;}#mermaid-svg-1dT1ZKvDzkdD3sGF svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-1dT1ZKvDzkdD3sGF .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-1dT1ZKvDzkdD3sGF text.actortspan{fill:black;stroke:none;}#mermaid-svg-1dT1ZKvDzkdD3sGF .actor-line{stroke:grey;}#mermaid-svg-1dT1ZKvDzkdD3sGF .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-1dT1ZKvDzkdD3sGF .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-1dT1ZKvDzkdD3sGF #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-1dT1ZKvDzkdD3sGF .sequenceNumber{fill:white;}#mermaid-svg-1dT1ZKvDzkdD3sGF #sequencenumber{fill:#333;}#mermaid-svg-1dT1ZKvDzkdD3sGF #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-1dT1ZKvDzkdD3sGF .messageText{fill:#333;stroke:#333;}#mermaid-svg-1dT1ZKvDzkdD3sGF .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-1dT1ZKvDzkdD3sGF .labelText,#mermaid-svg-1dT1ZKvDzkdD3sGF .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-1dT1ZKvDzkdD3sGF .loopText,#mermaid-svg-1dT1ZKvDzkdD3sGF .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-1dT1ZKvDzkdD3sGF .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-1dT1ZKvDzkdD3sGF .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-1dT1ZKvDzkdD3sGF .noteText,#mermaid-svg-1dT1ZKvDzkdD3sGF .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-1dT1ZKvDzkdD3sGF .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-1dT1ZKvDzkdD3sGF .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-1dT1ZKvDzkdD3sGF .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-1dT1ZKvDzkdD3sGF .actorPopupMenu{position:absolute;}#mermaid-svg-1dT1ZKvDzkdD3sGF .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-1dT1ZKvDzkdD3sGF .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-1dT1ZKvDzkdD3sGF .actor-man circle,#mermaid-svg-1dT1ZKvDzkdD3sGF line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-1dT1ZKvDzkdD3sGF :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail! Great! How about you? Jolly good! Alice Bob John 另一个应用案例
代码
sequenceDiagramparticipant Aliceparticipant Johnrect rgb(191, 223, 255)note right of Alice: Alice calls John.Alice-John: Hello John, how are you?rect rgb(200, 150, 255)Alice-John: John, can you hear me?John---Alice: Hi Alice, I can hear you!endJohn---Alice: I feel great!endAlice - John: Did you want to go to the game tonight?John --- Alice: Yeah! See you there.效果 #mermaid-svg-h9mvvifjdFgkK8zo {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-h9mvvifjdFgkK8zo .error-icon{fill:#552222;}#mermaid-svg-h9mvvifjdFgkK8zo .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-h9mvvifjdFgkK8zo .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-h9mvvifjdFgkK8zo .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-h9mvvifjdFgkK8zo .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-h9mvvifjdFgkK8zo .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-h9mvvifjdFgkK8zo .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-h9mvvifjdFgkK8zo .marker{fill:#333333;stroke:#333333;}#mermaid-svg-h9mvvifjdFgkK8zo .marker.cross{stroke:#333333;}#mermaid-svg-h9mvvifjdFgkK8zo svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-h9mvvifjdFgkK8zo .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-h9mvvifjdFgkK8zo text.actortspan{fill:black;stroke:none;}#mermaid-svg-h9mvvifjdFgkK8zo .actor-line{stroke:grey;}#mermaid-svg-h9mvvifjdFgkK8zo .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-h9mvvifjdFgkK8zo .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-h9mvvifjdFgkK8zo #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-h9mvvifjdFgkK8zo .sequenceNumber{fill:white;}#mermaid-svg-h9mvvifjdFgkK8zo #sequencenumber{fill:#333;}#mermaid-svg-h9mvvifjdFgkK8zo #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-h9mvvifjdFgkK8zo .messageText{fill:#333;stroke:#333;}#mermaid-svg-h9mvvifjdFgkK8zo .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-h9mvvifjdFgkK8zo .labelText,#mermaid-svg-h9mvvifjdFgkK8zo .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-h9mvvifjdFgkK8zo .loopText,#mermaid-svg-h9mvvifjdFgkK8zo .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-h9mvvifjdFgkK8zo .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-h9mvvifjdFgkK8zo .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-h9mvvifjdFgkK8zo .noteText,#mermaid-svg-h9mvvifjdFgkK8zo .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-h9mvvifjdFgkK8zo .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-h9mvvifjdFgkK8zo .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-h9mvvifjdFgkK8zo .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-h9mvvifjdFgkK8zo .actorPopupMenu{position:absolute;}#mermaid-svg-h9mvvifjdFgkK8zo .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-h9mvvifjdFgkK8zo .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-h9mvvifjdFgkK8zo .actor-man circle,#mermaid-svg-h9mvvifjdFgkK8zo line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-h9mvvifjdFgkK8zo :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Alice John Alice calls John. Hello John, how are you? John, can you hear me? Hi Alice, I can hear you! I feel great! Did you want to go to the game tonight? Yeah! See you there. Alice John 甘特图
Mermaid 是一个用于生成图表和流程图的 JavaScript 库它使用 Markdown 语法进行绘图。要在 Mermaid 中生成甘特图可以使用以下语法
graph TDA[项目开始] -- B[任务1]B -- C[任务2]C -- D[任务3]D -- E[项目结束]B -- F[任务4]F -- E在上面的代码中A 是项目的起点E 是终点B、C、D 和 F 是项目中的各个任务。使用箭头 (--) 表示任务之间的依赖关系。
您可以在代码中添加样式和注释以自定义甘特图的外观和描述。例如您可以使用以下语法为每个任务添加样式和注释
graph TDA[项目开始] -- B[任务1 : 这是一个注释]B -- C[任务2 : 这是另一个注释]C -- D[任务3]D -- E[项目结束]B -- F[任务4 : 还有一个注释]F -- E在上面的代码中: 这是一个注释、: 这是另一个注释 和 : 还有一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。
简单案例
代码
gantttitle Example Gantt ChartdateFormat YYYY-MM-DDsection Sectiontask 1: 2019-01-01, 30dtask 2: 2019-02-01, 14dtask 3: 2019-03-01, 7d效果 #mermaid-svg-GE1H2JEIieHTEmmr {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GE1H2JEIieHTEmmr .error-icon{fill:#552222;}#mermaid-svg-GE1H2JEIieHTEmmr .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-GE1H2JEIieHTEmmr .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-GE1H2JEIieHTEmmr .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-GE1H2JEIieHTEmmr .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-GE1H2JEIieHTEmmr .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-GE1H2JEIieHTEmmr .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-GE1H2JEIieHTEmmr .marker{fill:#333333;stroke:#333333;}#mermaid-svg-GE1H2JEIieHTEmmr .marker.cross{stroke:#333333;}#mermaid-svg-GE1H2JEIieHTEmmr svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-GE1H2JEIieHTEmmr .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-GE1H2JEIieHTEmmr .exclude-range{fill:#eeeeee;}#mermaid-svg-GE1H2JEIieHTEmmr .section{stroke:none;opacity:0.2;}#mermaid-svg-GE1H2JEIieHTEmmr .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-GE1H2JEIieHTEmmr .section2{fill:#fff400;}#mermaid-svg-GE1H2JEIieHTEmmr .section1,#mermaid-svg-GE1H2JEIieHTEmmr .section3{fill:white;opacity:0.2;}#mermaid-svg-GE1H2JEIieHTEmmr .sectionTitle0{fill:#333;}#mermaid-svg-GE1H2JEIieHTEmmr .sectionTitle1{fill:#333;}#mermaid-svg-GE1H2JEIieHTEmmr .sectionTitle2{fill:#333;}#mermaid-svg-GE1H2JEIieHTEmmr .sectionTitle3{fill:#333;}#mermaid-svg-GE1H2JEIieHTEmmr .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-GE1H2JEIieHTEmmr .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-GE1H2JEIieHTEmmr .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-GE1H2JEIieHTEmmr .grid path{stroke-width:0;}#mermaid-svg-GE1H2JEIieHTEmmr .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-GE1H2JEIieHTEmmr .task{stroke-width:2;}#mermaid-svg-GE1H2JEIieHTEmmr .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-GE1H2JEIieHTEmmr .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-GE1H2JEIieHTEmmr .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-GE1H2JEIieHTEmmr .task.clickable{cursor:pointer;}#mermaid-svg-GE1H2JEIieHTEmmr .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-GE1H2JEIieHTEmmr .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-GE1H2JEIieHTEmmr .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-GE1H2JEIieHTEmmr .taskText0,#mermaid-svg-GE1H2JEIieHTEmmr .taskText1,#mermaid-svg-GE1H2JEIieHTEmmr .taskText2,#mermaid-svg-GE1H2JEIieHTEmmr .taskText3{fill:white;}#mermaid-svg-GE1H2JEIieHTEmmr .task0,#mermaid-svg-GE1H2JEIieHTEmmr .task1,#mermaid-svg-GE1H2JEIieHTEmmr .task2,#mermaid-svg-GE1H2JEIieHTEmmr .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-GE1H2JEIieHTEmmr .taskTextOutside0,#mermaid-svg-GE1H2JEIieHTEmmr .taskTextOutside2{fill:black;}#mermaid-svg-GE1H2JEIieHTEmmr .taskTextOutside1,#mermaid-svg-GE1H2JEIieHTEmmr .taskTextOutside3{fill:black;}#mermaid-svg-GE1H2JEIieHTEmmr .active0,#mermaid-svg-GE1H2JEIieHTEmmr .active1,#mermaid-svg-GE1H2JEIieHTEmmr .active2,#mermaid-svg-GE1H2JEIieHTEmmr .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-GE1H2JEIieHTEmmr .activeText0,#mermaid-svg-GE1H2JEIieHTEmmr .activeText1,#mermaid-svg-GE1H2JEIieHTEmmr .activeText2,#mermaid-svg-GE1H2JEIieHTEmmr .activeText3{fill:black!important;}#mermaid-svg-GE1H2JEIieHTEmmr .done0,#mermaid-svg-GE1H2JEIieHTEmmr .done1,#mermaid-svg-GE1H2JEIieHTEmmr .done2,#mermaid-svg-GE1H2JEIieHTEmmr .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-GE1H2JEIieHTEmmr .doneText0,#mermaid-svg-GE1H2JEIieHTEmmr .doneText1,#mermaid-svg-GE1H2JEIieHTEmmr .doneText2,#mermaid-svg-GE1H2JEIieHTEmmr .doneText3{fill:black!important;}#mermaid-svg-GE1H2JEIieHTEmmr .crit0,#mermaid-svg-GE1H2JEIieHTEmmr .crit1,#mermaid-svg-GE1H2JEIieHTEmmr .crit2,#mermaid-svg-GE1H2JEIieHTEmmr .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-GE1H2JEIieHTEmmr .activeCrit0,#mermaid-svg-GE1H2JEIieHTEmmr .activeCrit1,#mermaid-svg-GE1H2JEIieHTEmmr .activeCrit2,#mermaid-svg-GE1H2JEIieHTEmmr .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-GE1H2JEIieHTEmmr .doneCrit0,#mermaid-svg-GE1H2JEIieHTEmmr .doneCrit1,#mermaid-svg-GE1H2JEIieHTEmmr .doneCrit2,#mermaid-svg-GE1H2JEIieHTEmmr .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-GE1H2JEIieHTEmmr .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-GE1H2JEIieHTEmmr .milestoneText{font-style:italic;}#mermaid-svg-GE1H2JEIieHTEmmr .doneCritText0,#mermaid-svg-GE1H2JEIieHTEmmr .doneCritText1,#mermaid-svg-GE1H2JEIieHTEmmr .doneCritText2,#mermaid-svg-GE1H2JEIieHTEmmr .doneCritText3{fill:black!important;}#mermaid-svg-GE1H2JEIieHTEmmr .activeCritText0,#mermaid-svg-GE1H2JEIieHTEmmr .activeCritText1,#mermaid-svg-GE1H2JEIieHTEmmr .activeCritText2,#mermaid-svg-GE1H2JEIieHTEmmr .activeCritText3{fill:black!important;}#mermaid-svg-GE1H2JEIieHTEmmr .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-GE1H2JEIieHTEmmr :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2019-01-06 2019-01-13 2019-01-20 2019-01-27 2019-02-03 2019-02-10 2019-02-17 2019-02-24 2019-03-03 task 1 task 2 task 3 Section Example Gantt Chart 应用案例
代码
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
效果 #mermaid-svg-C9o55YhWAMyBOp8n {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-C9o55YhWAMyBOp8n .error-icon{fill:#552222;}#mermaid-svg-C9o55YhWAMyBOp8n .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-C9o55YhWAMyBOp8n .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-C9o55YhWAMyBOp8n .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-C9o55YhWAMyBOp8n .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-C9o55YhWAMyBOp8n .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-C9o55YhWAMyBOp8n .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-C9o55YhWAMyBOp8n .marker{fill:#333333;stroke:#333333;}#mermaid-svg-C9o55YhWAMyBOp8n .marker.cross{stroke:#333333;}#mermaid-svg-C9o55YhWAMyBOp8n svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-C9o55YhWAMyBOp8n .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-C9o55YhWAMyBOp8n .exclude-range{fill:#eeeeee;}#mermaid-svg-C9o55YhWAMyBOp8n .section{stroke:none;opacity:0.2;}#mermaid-svg-C9o55YhWAMyBOp8n .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-C9o55YhWAMyBOp8n .section2{fill:#fff400;}#mermaid-svg-C9o55YhWAMyBOp8n .section1,#mermaid-svg-C9o55YhWAMyBOp8n .section3{fill:white;opacity:0.2;}#mermaid-svg-C9o55YhWAMyBOp8n .sectionTitle0{fill:#333;}#mermaid-svg-C9o55YhWAMyBOp8n .sectionTitle1{fill:#333;}#mermaid-svg-C9o55YhWAMyBOp8n .sectionTitle2{fill:#333;}#mermaid-svg-C9o55YhWAMyBOp8n .sectionTitle3{fill:#333;}#mermaid-svg-C9o55YhWAMyBOp8n .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-C9o55YhWAMyBOp8n .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-C9o55YhWAMyBOp8n .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-C9o55YhWAMyBOp8n .grid path{stroke-width:0;}#mermaid-svg-C9o55YhWAMyBOp8n .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-C9o55YhWAMyBOp8n .task{stroke-width:2;}#mermaid-svg-C9o55YhWAMyBOp8n .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-C9o55YhWAMyBOp8n .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-C9o55YhWAMyBOp8n .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-C9o55YhWAMyBOp8n .task.clickable{cursor:pointer;}#mermaid-svg-C9o55YhWAMyBOp8n .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-C9o55YhWAMyBOp8n .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-C9o55YhWAMyBOp8n .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-C9o55YhWAMyBOp8n .taskText0,#mermaid-svg-C9o55YhWAMyBOp8n .taskText1,#mermaid-svg-C9o55YhWAMyBOp8n .taskText2,#mermaid-svg-C9o55YhWAMyBOp8n .taskText3{fill:white;}#mermaid-svg-C9o55YhWAMyBOp8n .task0,#mermaid-svg-C9o55YhWAMyBOp8n .task1,#mermaid-svg-C9o55YhWAMyBOp8n .task2,#mermaid-svg-C9o55YhWAMyBOp8n .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-C9o55YhWAMyBOp8n .taskTextOutside0,#mermaid-svg-C9o55YhWAMyBOp8n .taskTextOutside2{fill:black;}#mermaid-svg-C9o55YhWAMyBOp8n .taskTextOutside1,#mermaid-svg-C9o55YhWAMyBOp8n .taskTextOutside3{fill:black;}#mermaid-svg-C9o55YhWAMyBOp8n .active0,#mermaid-svg-C9o55YhWAMyBOp8n .active1,#mermaid-svg-C9o55YhWAMyBOp8n .active2,#mermaid-svg-C9o55YhWAMyBOp8n .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-C9o55YhWAMyBOp8n .activeText0,#mermaid-svg-C9o55YhWAMyBOp8n .activeText1,#mermaid-svg-C9o55YhWAMyBOp8n .activeText2,#mermaid-svg-C9o55YhWAMyBOp8n .activeText3{fill:black!important;}#mermaid-svg-C9o55YhWAMyBOp8n .done0,#mermaid-svg-C9o55YhWAMyBOp8n .done1,#mermaid-svg-C9o55YhWAMyBOp8n .done2,#mermaid-svg-C9o55YhWAMyBOp8n .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-C9o55YhWAMyBOp8n .doneText0,#mermaid-svg-C9o55YhWAMyBOp8n .doneText1,#mermaid-svg-C9o55YhWAMyBOp8n .doneText2,#mermaid-svg-C9o55YhWAMyBOp8n .doneText3{fill:black!important;}#mermaid-svg-C9o55YhWAMyBOp8n .crit0,#mermaid-svg-C9o55YhWAMyBOp8n .crit1,#mermaid-svg-C9o55YhWAMyBOp8n .crit2,#mermaid-svg-C9o55YhWAMyBOp8n .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-C9o55YhWAMyBOp8n .activeCrit0,#mermaid-svg-C9o55YhWAMyBOp8n .activeCrit1,#mermaid-svg-C9o55YhWAMyBOp8n .activeCrit2,#mermaid-svg-C9o55YhWAMyBOp8n .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-C9o55YhWAMyBOp8n .doneCrit0,#mermaid-svg-C9o55YhWAMyBOp8n .doneCrit1,#mermaid-svg-C9o55YhWAMyBOp8n .doneCrit2,#mermaid-svg-C9o55YhWAMyBOp8n .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-C9o55YhWAMyBOp8n .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-C9o55YhWAMyBOp8n .milestoneText{font-style:italic;}#mermaid-svg-C9o55YhWAMyBOp8n .doneCritText0,#mermaid-svg-C9o55YhWAMyBOp8n .doneCritText1,#mermaid-svg-C9o55YhWAMyBOp8n .doneCritText2,#mermaid-svg-C9o55YhWAMyBOp8n .doneCritText3{fill:black!important;}#mermaid-svg-C9o55YhWAMyBOp8n .activeCritText0,#mermaid-svg-C9o55YhWAMyBOp8n .activeCritText1,#mermaid-svg-C9o55YhWAMyBOp8n .activeCritText2,#mermaid-svg-C9o55YhWAMyBOp8n .activeCritText3{fill:black!important;}#mermaid-svg-C9o55YhWAMyBOp8n .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-C9o55YhWAMyBOp8n :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 Completed task Active task Future task Future task2 A section Adding GANTT diagram to mermaid 一个更为复杂的应用案例
代码
ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidexcludes weekends%% (excludes accepts specific dates in YYYY-MM-DD format, days of the week (sunday) or weekends, but not the word weekdays.)section A sectionCompleted task :done, des1, 2014-01-06,2014-01-08Active task :active, des2, 2014-01-09, 3dFuture task : des3, after des2, 5dFuture task2 : des4, after des3, 5dsection Critical tasksCompleted task in the critical line :crit, done, 2014-01-06,24hImplement parser and jison :crit, done, after des1, 2dCreate tests for parser :crit, active, 3dFuture task in critical line :crit, 5dCreate tests for renderer :2dAdd to mermaid :1dFunctionality added :milestone, 2014-01-25, 0dsection DocumentationDescribe gantt syntax :active, a1, after des1, 3dAdd gantt diagram to demo page :after a1 , 20hAdd another diagram to demo page :doc1, after a1 , 48hsection Last sectionDescribe gantt syntax :after doc1, 3dAdd gantt diagram to demo page :20hAdd another diagram to demo page :48h
效果 #mermaid-svg-8Vvn6E707UE4NpNU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8Vvn6E707UE4NpNU .error-icon{fill:#552222;}#mermaid-svg-8Vvn6E707UE4NpNU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8Vvn6E707UE4NpNU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8Vvn6E707UE4NpNU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8Vvn6E707UE4NpNU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8Vvn6E707UE4NpNU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8Vvn6E707UE4NpNU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8Vvn6E707UE4NpNU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8Vvn6E707UE4NpNU .marker.cross{stroke:#333333;}#mermaid-svg-8Vvn6E707UE4NpNU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8Vvn6E707UE4NpNU .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-8Vvn6E707UE4NpNU .exclude-range{fill:#eeeeee;}#mermaid-svg-8Vvn6E707UE4NpNU .section{stroke:none;opacity:0.2;}#mermaid-svg-8Vvn6E707UE4NpNU .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-8Vvn6E707UE4NpNU .section2{fill:#fff400;}#mermaid-svg-8Vvn6E707UE4NpNU .section1,#mermaid-svg-8Vvn6E707UE4NpNU .section3{fill:white;opacity:0.2;}#mermaid-svg-8Vvn6E707UE4NpNU .sectionTitle0{fill:#333;}#mermaid-svg-8Vvn6E707UE4NpNU .sectionTitle1{fill:#333;}#mermaid-svg-8Vvn6E707UE4NpNU .sectionTitle2{fill:#333;}#mermaid-svg-8Vvn6E707UE4NpNU .sectionTitle3{fill:#333;}#mermaid-svg-8Vvn6E707UE4NpNU .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-8Vvn6E707UE4NpNU .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-8Vvn6E707UE4NpNU .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-8Vvn6E707UE4NpNU .grid path{stroke-width:0;}#mermaid-svg-8Vvn6E707UE4NpNU .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-8Vvn6E707UE4NpNU .task{stroke-width:2;}#mermaid-svg-8Vvn6E707UE4NpNU .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-8Vvn6E707UE4NpNU .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-8Vvn6E707UE4NpNU .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-8Vvn6E707UE4NpNU .task.clickable{cursor:pointer;}#mermaid-svg-8Vvn6E707UE4NpNU .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-8Vvn6E707UE4NpNU .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-8Vvn6E707UE4NpNU .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-8Vvn6E707UE4NpNU .taskText0,#mermaid-svg-8Vvn6E707UE4NpNU .taskText1,#mermaid-svg-8Vvn6E707UE4NpNU .taskText2,#mermaid-svg-8Vvn6E707UE4NpNU .taskText3{fill:white;}#mermaid-svg-8Vvn6E707UE4NpNU .task0,#mermaid-svg-8Vvn6E707UE4NpNU .task1,#mermaid-svg-8Vvn6E707UE4NpNU .task2,#mermaid-svg-8Vvn6E707UE4NpNU .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-8Vvn6E707UE4NpNU .taskTextOutside0,#mermaid-svg-8Vvn6E707UE4NpNU .taskTextOutside2{fill:black;}#mermaid-svg-8Vvn6E707UE4NpNU .taskTextOutside1,#mermaid-svg-8Vvn6E707UE4NpNU .taskTextOutside3{fill:black;}#mermaid-svg-8Vvn6E707UE4NpNU .active0,#mermaid-svg-8Vvn6E707UE4NpNU .active1,#mermaid-svg-8Vvn6E707UE4NpNU .active2,#mermaid-svg-8Vvn6E707UE4NpNU .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-8Vvn6E707UE4NpNU .activeText0,#mermaid-svg-8Vvn6E707UE4NpNU .activeText1,#mermaid-svg-8Vvn6E707UE4NpNU .activeText2,#mermaid-svg-8Vvn6E707UE4NpNU .activeText3{fill:black!important;}#mermaid-svg-8Vvn6E707UE4NpNU .done0,#mermaid-svg-8Vvn6E707UE4NpNU .done1,#mermaid-svg-8Vvn6E707UE4NpNU .done2,#mermaid-svg-8Vvn6E707UE4NpNU .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-8Vvn6E707UE4NpNU .doneText0,#mermaid-svg-8Vvn6E707UE4NpNU .doneText1,#mermaid-svg-8Vvn6E707UE4NpNU .doneText2,#mermaid-svg-8Vvn6E707UE4NpNU .doneText3{fill:black!important;}#mermaid-svg-8Vvn6E707UE4NpNU .crit0,#mermaid-svg-8Vvn6E707UE4NpNU .crit1,#mermaid-svg-8Vvn6E707UE4NpNU .crit2,#mermaid-svg-8Vvn6E707UE4NpNU .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-8Vvn6E707UE4NpNU .activeCrit0,#mermaid-svg-8Vvn6E707UE4NpNU .activeCrit1,#mermaid-svg-8Vvn6E707UE4NpNU .activeCrit2,#mermaid-svg-8Vvn6E707UE4NpNU .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-8Vvn6E707UE4NpNU .doneCrit0,#mermaid-svg-8Vvn6E707UE4NpNU .doneCrit1,#mermaid-svg-8Vvn6E707UE4NpNU .doneCrit2,#mermaid-svg-8Vvn6E707UE4NpNU .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-8Vvn6E707UE4NpNU .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-8Vvn6E707UE4NpNU .milestoneText{font-style:italic;}#mermaid-svg-8Vvn6E707UE4NpNU .doneCritText0,#mermaid-svg-8Vvn6E707UE4NpNU .doneCritText1,#mermaid-svg-8Vvn6E707UE4NpNU .doneCritText2,#mermaid-svg-8Vvn6E707UE4NpNU .doneCritText3{fill:black!important;}#mermaid-svg-8Vvn6E707UE4NpNU .activeCritText0,#mermaid-svg-8Vvn6E707UE4NpNU .activeCritText1,#mermaid-svg-8Vvn6E707UE4NpNU .activeCritText2,#mermaid-svg-8Vvn6E707UE4NpNU .activeCritText3{fill:black!important;}#mermaid-svg-8Vvn6E707UE4NpNU .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-8Vvn6E707UE4NpNU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 2014-01-25 2014-01-27 Completed task Completed task in the critical line Implement parser and jison Describe gantt syntax Active task Create tests for parser Add gantt diagram to demo page Add another diagram to demo page Future task Future task in critical line Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page Future task2 Create tests for renderer Add to mermaid Functionality added A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid Git图
Mermaid 是一个用于生成图表和流程图的 JavaScript 库它使用 Markdown 语法进行绘图。要在 Mermaid 中生成 Git 提交历史图可以使用以下语法
graph TDA[提交历史]B[提交1] -- C[提交2]C -- D[提交3]D -- E[提交4]在上面的代码中A 是 Git 提交历史的起点B、C、D 和 E 是各个提交。使用箭头 (--) 表示提交之间的依赖关系。
您可以在代码中添加样式和注释以自定义 Git 提交历史图的外观和描述。例如您可以使用以下语法为每个提交添加样式和注释
graph TDA[提交历史]B[提交1 : 这是一个注释] -- C[提交2 : 这是另一个注释]C -- D[提交3 : 还有另一个注释]D -- E[提交4]在上面的代码中: 这是一个注释、: 这是另一个注释 和 : 还有另一个注释 是用于添加注释的样式。您可以根据需要自定义样式和注释。
简单案例
代码
gitGraphcommitcommitbranch developcommitcommitcommitcheckout maincommitcommitmerge developcommitcommit效果
总结
接下来做一个小小的总结
我们讨论了使用 Mermaid 来生成不同类型的图表。Mermaid 是一个 JavaScript 库它允许用户使用 Markdown 语法来创建和渲染流程图、序列图、甘特图和 Git 提交历史图等。 流程图使用 graph 关键字来定义流程图并通过箭头 (--) 来表示流程中的步骤和它们之间的关系。 序列图也使用 graph 关键字但通常指定方向如 LR 表示从左到右。序列图用于显示对象之间的交互箭头表示消息传递。 甘特图虽然 Mermaid 本身不直接支持甘特图但可以通过一些变通的方法如使用流程图来模拟甘特图的效果。然而标准的 Mermaid 语法不包括专门用于甘特图的指令。 Git 提交历史图关于这一点上面的回答可能有误导之嫌。实际上Mermaid 本身不直接支持 Git 提交历史图的生成。Git 提交历史图通常使用其他工具如 GitGraph.js来生成。Mermaid 更专注于流程图和序列图等通用图表的绘制。
总结来说Mermaid 是一个强大的工具用于在 Markdown 文档中创建各种类型的图表。
然而需要注意的是它可能不支持所有类型的图表特别是像甘特图和 Git 提交历史图这样的专门用途的图表。对于这些特定需求可能需要寻找其他专门的工具或库。
