Son aktivite 9 months ago

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

timmy bu gisti düzenledi 9 months ago. Düzenlemeye git

1 file changed, 24 insertions

mermaid_diagram_example.html(dosya oluşturuldu)

@@ -0,0 +1,24 @@
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>
Daha yeni Daha eski