Остання активність 9 months ago

此 HTML 範例展示如何使用 Mermaid CDN 與 JavaScript 將 Mermaid 語法轉換為流程圖,以快速視覺化流程設計。

mermaid_diagram_example.html Неформатований
1<!doctype html>
2<html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Mermaid Diagram Example</title>
6 <!-- 載入 Mermaid CDN -->
7 <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
8 <script>
9 mermaid.initialize({ startOnLoad: true })
10 </script>
11 </head>
12 <body>
13 <h1>Mermaid Diagram</h1>
14 <!-- 將你的 Mermaid 原始碼放在這個 div 中 -->
15 <div class="mermaid">
16 flowchart TD
17 A[Christmas] -->|Get money| B(Go shopping)
18 B --> C{Let me think}
19 C -->|One| D[Laptop]
20 C -->|Two| E[iPhone]
21 C -->|Three| F[fa:fa-car Car]
22 </div>
23 </body>
24</html>
25