MarkNode 可以直接在預覽中繪製圖表。你只要在圍籬式程式碼區塊中，以 Mermaid 語法撰寫圖表——這是一種用純文字描述流程圖、循序圖等的方式——MarkNode 就會完全離線地將它繪製成圖片，取代原本的程式碼。
撰寫圖表
使用圍籬式程式碼區塊，並以 mermaid 作為語言識別字：
```mermaid
flowchart TD
Start[Start] --> Decision{Need a diagram?}
Decision -->|Yes| Draw[Write it in Markdown]
Decision -->|No| Skip[Keep writing prose]
Draw --> Done[Done]
Skip --> Done
```預覽會將程式碼區塊替換成繪製完成的流程圖。Markdown 原始碼並未改變——MarkNode 只是為它畫了一張圖；若想修改圖表，只要編輯 mermaid 文字，圖片就會隨之更新。
完整樣式化的圖表類型
流程圖、循序圖、類別圖與狀態圖享有 MarkNode 的完整處理——版面與字體排印都會與文件其餘部分一致，而不只是一張通用的嵌入圖片。
以循序圖為例：
```mermaid
sequenceDiagram
participant Writer
participant MarkNode
Writer->>MarkNode: Write a mermaid code block
MarkNode-->>Writer: Render diagram in preview
```
類別圖與狀態圖使用相同的 mermaid 圍籬，搭配各自的 Mermaid 關鍵字（classDiagram、stateDiagram-v2），並以同樣精緻的水準呈現。
其他圖表類型
許多其他 Mermaid 圖表類型——包括圓餅圖與甘特圖——目前在 MarkNode 中同樣可以繪製，會依你的佈景主題套用樣式，成為真正的圖表而非程式碼。流程圖、循序圖、類別圖與狀態圖所享有的自訂版面精緻度，也已規劃在未來的更新中套用到這些圖表類型。
配合你的佈景主題
在預覽中，圖表會遵循文件的應用程式佈景主題。切換佈景主題時，畫面上的所有圖表都會隨著預覽的其餘部分一起重新套用樣式——不需要另外設定。
Quick Look 預覽則改為遵循 Mac 的系統淺色／深色外觀。流程圖、循序圖、類別圖與狀態圖在兩種情況下都能配合；圓餅圖與甘特圖目前在 Quick Look 中以單一配色呈現。
圖表出現的位置
只要是顯示繪製後 Markdown 的介面，圖表都會呈現：
- 停靠的預覽窗格
- 未停靠的預覽視窗
- macOS Quick Look（在 Finder 中選取 Markdown 檔案並按下空白鍵——請參閱 Quick Look 預覽）
- DOCX 匯出，以嵌入圖片的形式
錯誤
若圖表的 Mermaid 語法有誤——無法辨識的圖表類型、語法上的錯字——MarkNode 會顯示原始的圍籬式程式碼區塊，而不是損毀或空白的圖片。文件的其餘部分仍會正常呈現；只有那一個區塊會受影響。修正原始碼後，圖表會在預覽下次更新時出現。
支援的語法
MarkNode 遵循 Mermaid 專案本身的語法。若想了解完整的圖表類型與選項，請參閱 Mermaid 官方文件——在該處有效的語法，就是 MarkNode 會嘗試繪製的內容。