工作流

在 Slack 中建立和編輯 Mermaid 圖表

Slack 本身不會渲染 Mermaid。使用 Arialine，你可以自己撰寫 Mermaid——輸入 /arialine 並貼上，它會完全依原樣渲染，無需 AI——也可以用自然語言描述圖表，讓 Arialine 撰寫原始碼。無論哪種方式，圖表都會以 PNG 和互動式 HTML 檔案的形式出現在 Slack 中，隊友只需在討論串中回覆即可修改，無需從頭再來。

將 Arialine 新增到我的 Slack 使用情境

1問題

Mermaid 在 Slack 中的問題

Slack 把 Mermaid 顯示為純程式碼——看不到的圖表沒人會去評審。
擷取本地 Mermaid 預覽會丟失原始碼，之後就沒人能再修改。
單獨一張 PNG 無法說明哪份原始碼是最新的，也無法說明是哪次討論導致了修改。
Slack 會轉義訊息中的 > 和 & 等字元，複製程式碼時 -->> 這類箭頭會悄悄失效。

2Arialine 的解決方式

在 Slack 中製作 Mermaid 圖表的兩種方式

1
自己撰寫：貼上你的 Mermaid
輸入 /arialine 後接你的 Mermaid，或只輸入 /arialine 開啟 New diagram 表單。也可以在提及 @arialine 時附上 ```mermaid 程式碼區塊，或分享 .mmd 檔案。有效的 Mermaid 會依原樣算繪，不呼叫 AI 模型。
2
直接描述：讓 Arialine 撰寫原始碼
在同一表單中寫一句話，或提及 @arialine：「帶重試佇列、三次失敗後進入死信佇列的結帳流程」。Arialine 會撰寫 Mermaid、進行驗證並發布圖表。原始碼隨時可以查看和匯出。
3
發布前先校驗
每張圖表都會先經過渲染器校驗。有錯誤的 Mermaid 會由 AI 自動修復（或提供一鍵修復卡片）——出錯的圖表絕不會被髮布。
4
討論串中的可互動 HTML + PNG
在桌面端你會得到可平移縮放的互動式 HTML 檔案，其他場景則是 PNG。原始碼始終附在看板上，可隨時匯出為 .mmd、PNG 或 SVG。
5
無需從頭再來即可修改
隊友在圖表討論串中回覆——「@arialine add a fraud check before payment」——Arialine 會修改現有原始碼，而不是重新畫一張圖。每次修改都是一個帶編號的版本，附帶 Undo、Rewind 以及指向提出修改的那則訊息的連結。

3直接使用你已有的原始碼

貼上 Mermaid，隨時可編輯

貼上 Mermaid 程式碼塊或上傳 .mmd，然後使用 Render as diagram。是否自動渲染取決於頻道設定。在請求具體修改之前，請先檢查已發布的圖表和原始碼。

看板會保留可編輯的 Mermaid。可將原始碼匯出為 .mmd，或將渲染圖匯出為 PNG 或 SVG；在提議模式下，應用修改前請先稽核。

Arialine 的 Mermaid 原始碼視窗，可編輯圖表原始碼 — 可將原始碼匯出為 .mmd，或將渲染圖匯出為 PNG 或 SVG。

4你會得到什麼

圖表直接發布在頻道中

Arialine 會回覆一個看板：渲染好的 PNG、可縮放和拖曳的互動式 HTML 檔案，以及 History、Branch 和 Export 控制項。後續版本會出現在其下方的討論串中。

幾分鐘即可完成設定

1點擊 Add to Slack，為你的工作區核准 Arialine（可能需要管理員核准）。
2將它邀請到頻道：輸入 /invite @Arialine。
3輸入 /arialine，貼上你的 Mermaid 或描述圖表，然後點擊 Create。
4在圖表討論串中以 @arialine 回覆一項修改，即可產生版本 2。

將 Arialine 新增到我的 Slack

Arialine 在 Slack 中發送的一則訊息：包含渲染好的 checkout-review 圖表、History 和 Branch 按鈕、Export 選單以及互動式 HTML 檔案

FAQ

常見問題

Slack 支援 Mermaid 圖表嗎？+

不支援原生渲染：Slack 會把 Mermaid 顯示為程式碼區塊，需要 Slack 應用程式來渲染。Arialine 會渲染你貼上或分享的 Mermaid，並將結果以 PNG 和互動式 HTML 檔案的形式發布到頻道。

Slack 最好的 Mermaid 整合是什麼？+

如果你只需要一張一次性的圖片，簡單的渲染工具就夠了。如果圖表會不斷變化，Arialine 正是為此而生：它無需 AI 即可渲染貼上的 Mermaid，能根據自然語言產生 Mermaid，並把每次修改連同背後的 Slack 訊息一起儲存為版本。

我需要懂 Mermaid 語法嗎？+

不需要。你也可以直接用自然語言描述圖表——@arialine 會替你寫 Mermaid。貼上現成的 Mermaid 則會跳過 AI，直接渲染。

支援哪些 Mermaid 圖表型別？+

Mermaid 12 的所有類型以及 ZenUML：flowchart, sequence, class, state, ER, C4, Gantt, pie, mindmap, timeline, Git graph, user journey, quadrant, requirement, Sankey, XY chart, block, packet, kanban, architecture, radar, treemap, swimlane, use case, event modeling, Venn, Ishikawa (fishbone), Wardley map, Cynefin, tree view, railroad, agent flow。PNG、互動式 HTML 和 PDF 繪製的類型完全一致。

它與 Mermaid Preview 有什麼不同？+

Arialine 能做 Mermaid Preview 能做的一切——斜線指令、貼上 Mermaid、在頻道中發布渲染好的圖表——而且做得更好：它還會發布互動式 HTML、儲存原始碼、讓隊友在討論串中修改圖表、儲存每個版本，並能根據描述撰寫 Mermaid。

AI 模型宕機時還能渲染嗎？+

可以——有效的 Mermaid 會直接渲染，不經過模型，因此即使 LLM 故障也能正常渲染。