甘特圖、流程圖、ER 圖，咋做呀......
作者：程序員Sunday
很多同學(xué)在日常工作中，經(jīng)常會遇到很多復(fù)雜圖表的構(gòu)建，比如：甘特圖、流程圖、ER 圖?等等。每次遇到這種圖表，都會有很多同學(xué)來問我：“Sunday 老師，這種圖咋做？那種圖咋樣？
Hello，大家好，我是 Sunday。
很多同學(xué)在日常工作中，經(jīng)常會遇到很多復(fù)雜圖表的構(gòu)建，比如：甘特圖、流程圖、ER 圖 等等。
每次遇到這種圖表，都會有很多同學(xué)來問我：“Sunday 老師，這種圖咋做？那種圖咋樣？??”
所以說，今天咱們就來看一個專門用來做這種復(fù)雜圖表庫的 mermaid.js，以后再有同學(xué)來問我復(fù)雜圖表的繪制方式，我就讓他看這篇文章??（開個玩笑，還是得幫大家 1v1 溝通的ψ(｀?′)ψ）
什么是 mermaid.js
Mermaid.js 是一個基于 JavaScript 的可視化工具庫，它可以通過簡單的 Markdown 風(fēng)格語法生成多種類型的圖示，包括但不限于：
- 流程圖（Flowchart）
- 時序圖（Sequence Diagram）
- 甘特圖（Gantt Chart）
- ER 圖（Entity Relationship Diagram）
- 類圖（Class Diagram）
- 狀態(tài)圖（State Diagram）
- 用戶旅程圖（User Journey Diagram）
這意味著，Mermaid.js 可以將復(fù)雜的圖示生成工作簡化為編寫代碼的過程，目前 Mermaid.js 已經(jīng)有了 81.6k 的 star
圖表繪制的方式
Mermaid.js 通過 md 文檔生成圖表，即：不需要代碼，只需要配置 MD 文檔即可
接下來我們來看幾個利用 Mermaid.js 進行圖表繪制的演示
流程圖
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;通過以上 md 文檔，可以直接生成如下流程圖
圖片
序列圖
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
圖片
甘特圖
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section 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
類圖
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
圖片
Git 圖
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
圖片
實體關(guān)系圖
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
圖片
用戶旅程圖
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: 5: Me
圖片
基于 Vue 或者 React 使用 Mermaid.js
在實際開發(fā)中，我們經(jīng)常會配合 Vue 或者 React 完成項目開發(fā)。所以，接下來咱們就看那看 Mermaid.js 如何與這些框架配合使用
1. 在 Vue 中動態(tài)生成 Mermaid 圖表
- 安裝 Mermaid.js
npm install mermaid- 創(chuàng)建一個自定義組件
<template>
<div class="mermaid" ref="mermaidChart"></div>
</template>
<script>
import mermaid from "mermaid";
export default {
props: {
chartDefinition: {
type: String,
required: true,
},
},
mounted() {
this.renderMermaid();
},
watch: {
chartDefinition() {
this.renderMermaid();
},
},
methods: {
renderMermaid() {
if (this.chartDefinition) {
mermaid.initialize({ startOnLoad: false });
this.$refs.mermaidChart.innerHTML = this.chartDefinition;
mermaid.contentLoaded();
}
},
},
};
</script>
<style>
.mermaid {
overflow: auto;
}
</style>- 在父組件中使用
<template>
<div>
<MermaidChart :chartDefinition="chartData" />
<button @click="updateChart">更新圖表</button>
</div>
</template>
<script>
import MermaidChart from "./components/MermaidChart.vue";
export default {
components: { MermaidChart },
data() {
return {
chartData: `
graph TD
A[開始] --> B{是否完成任務(wù)？}
B -->|是| C[結(jié)束]
B -->|否| D[繼續(xù)努力]
`,
};
},
methods: {
updateChart() {
this.chartData = `
graph TD
X[更新開始] --> Y{完成了嗎？}
Y -->|是| Z[更新結(jié)束]
Y -->|否| W[繼續(xù)調(diào)整]
`;
},
},
};
</script>2. 在 React 中動態(tài)生成 Mermaid 圖表
- 安裝 Mermaid.js
npm install mermaid- 創(chuàng)建一個 Mermaid 組件
import React, { useEffect, useRef } from "react";
import mermaid from "mermaid";
const MermaidChart = ({ chartDefinition }) => {
const chartRef = useRef();
useEffect(() => {
mermaid.initialize({ startOnLoad: false });
if (chartDefinition) {
chartRef.current.innerHTML = chartDefinition;
mermaid.contentLoaded();
}
}, [chartDefinition]);
return <div className="mermaid" ref={chartRef}></div>;
};
export default MermaidChart;- 在父組件中使用
import React, { useState } from "react";
import MermaidChart from "./components/MermaidChart";
const App = () => {
const [chartData, setChartData] = useState(`
graph TD
A[開始] --> B{是否完成任務(wù)？}
B -->|是| C[結(jié)束]
B -->|否| D[繼續(xù)努力]
`);
const updateChart = () => {
setChartData(`
graph TD
X[更新開始] --> Y{完成了嗎？}
Y -->|是| Z[更新結(jié)束]
Y -->|否| W[繼續(xù)調(diào)整]
`);
};
return (
<div>
<MermaidChart chartDefinition={chartData} />
<button onClick={updateChart}>更新圖表</button>
</div>
);
};
export default App;使用思路
根據(jù)如上代碼所示，我們可以知道，想要在 Vue 或者 React 項目中使用 Mermaid，那么可以直接分為兩步：
- 將 Mermaid 圖表封裝成可復(fù)用的組件，接受 chartDefinition（圖表定義字符串）作為屬性。
- 通過監(jiān)聽 chartDefinition 的變化，重新渲染圖表。
責(zé)任編輯：武曉燕
來源：
程序員Sunday
