畫流程圖、狀態圖、時序圖、甘特圖的JS庫-mermaid-js
阿新 • • 發佈：2022-05-12
參考地址：https://github.com/mermaid-js/mermaid
原生使用方式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/mermaid.min.js"></script> <script> mermaid.initialize({ startOnLoad: true }); </script> </head> <body> Here is one mermaid diagram: <div class="mermaid"> graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] </div> And here is another: <div class="mermaid"> graph TD A[Client] -->|tcp_123| B B(Load Balancer) B -->|tcp_456| C[Server1] B -->|tcp_456| D[Server2] </div> </body> </html>
效果圖：
vue簡單使用方式：
index.html靜態模板引入mermaid.js:
<script type="text/javascript" src="./static/mermaid.min.js"></script>
在static下放一個模擬後端返回的mock資料，這兒讓後端返回html格式的如result.html：
graph TD A[Client] --> B[Load Balancer] B --> C[Server1] B --> D[Server2] style A fill:#0f0,stroke-width:5px,stroke:#0f0,opacity:0.5 style B fill:#0f0,stroke-width:5px,stroke:#0f0,opacity:0.5
在vue頁面使用如下：
<template> <div class="mermaid" v-html="html"></div> </template> <script> import axios from 'axios'; export default { data () { return { html: '' } }, created() { axios({ method: 'get', url: '/static/result.html', responseType: 'html' }).then((res) => { this.html = res.data; }) }, mounted() { mermaid.initialize({ startOnLoad: true }); } } </script>