流光筆記
首頁

🚀 擴充 Markdown 與全能圖表規範

FlashNote 為技術寫作、系統設計與工程架構提供了強大的擴充渲染支援，深度整合了 Mermaid 工業級圖表引擎 與 KaTeX 毫秒級數學公式系統，並在互動體驗與容錯性上進行了原生增強。

一、 FlashNote 獨家渲染與互動特性

在 FlashNote 中插入 Mermaid 圖表或數學公式時，享有以下原生互動套件：

  • 🖐️ 畫布自由抓取平移：滑鼠懸停於圖表上自動切換為抓手光標，按住滑鼠左鍵即可任意拖動畫布視野；
  • 🎯 雙擊快速居中重設：無論將畫布平移到何處或縮放至何種比例，雙擊畫布空白處，一秒恢復居中初始視圖；
  • 🔍 全螢幕沉浸燈箱 (Lightbox)：點擊圖表右上角的放大鏡圖示即可喚起全螢幕燈箱，支援透過滾輪或觸控板實現 30%～350% 無級平滑縮放；
  • 💾 高清 Retina / SVG 向量匯出：支援一鍵將圖表匯出為純向量 SVG，或帶純白底色與呼吸留白的 2x 視網膜高清 PNG；
  • 🛡️ 防崩潰智慧淨化 (Mermaid Sanitizer)：內建獨家語法消毒引擎，自動對節點文本中的未閉合括號、特殊符號與關鍵字進行轉義容錯，徹底消除因腳本拼寫失誤引起的整頁渲染白屏崩潰；
  • ⌨️ KaTeX 數學符號鍵盤：喚起公式彈窗時，底部配備常用希臘字母、微積分符號、矩陣與箭頭快捷輸入板。

二、 圖表與繪圖規範 (Diagrams)

無需外部繪圖工具或截圖，直接在代碼塊中選擇 mermaid 語言即可即時渲染原生互動圖表。

1. Mermaid (圖表/流程圖)

這是目前最流行的 Markdown 圖表語法。

👉 流程圖 (Flowchart)

graph TD
    A[開始] --> B{是否註冊?}
    B -->|是| C[登入系統]
    B -->|否| D[註冊帳號]
    D --> C
    C --> E[進入主頁]
    E --> F[結束]

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style F fill:#bbf,stroke:#333,stroke-width:2px

流程圖 (Flowchart)

👉 循序圖 (Sequence Diagram)

sequenceDiagram
    participant 用戶
    participant 前端
    participant 後端
    participant 資料庫

    用戶->>前端: 點擊登入
    前端->>後端: 發送請求 (POST /login)
    後端->>資料庫: 查詢用戶資料
    資料庫-->>後端: 返回用戶資料
    後端-->>前端: 返回 Token
    前端-->>用戶: 登入成功，跳轉首頁

循序圖 (Sequence Diagram)

👉 甘特圖 (Gantt Chart)

gantt
    title 專案開發計劃
    dateFormat  YYYY-MM-DD
    section 需求分析
    需求評審           :done,    des1, 2026-01-01,2026-01-05
    架構設計           :active,  des2, 2026-01-06, 5d
    section 研發階段
    前端核心開發       :         dev1, after des2, 10d
    後端 API 交付      :         dev2, after des2, 8d
    section 測試上線
    整合測試           :         test1, after dev1, 5d
    生產發布           :         milestone, 2026-01-28, 0d

甘特圖 (Gantt Chart)

👉 類別圖 (Class Diagram)

classDiagram
    class Animal {
        +String name
        +int age
        +breathe()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +meow()
    }
    Animal <|-- Dog : 繼承
    Animal <|-- Cat : 繼承

類別圖 (Class Diagram)

👉 狀態機圖 (State Diagram)

stateDiagram-v2
    [*] --> 待支付
    待支付 --> 處理中 : 用戶付款成功
    待支付 --> 已取消 : 超時未支付
    處理中 --> 已發貨 : 倉庫出庫
    已發貨 --> [*] : 確認收貨

狀態機圖 (State Diagram)

👉 圓餅圖 (Pie Chart)

pie title 部落格讀者來源分佈
    "搜尋引擎 (SEO)" : 48
    "社群媒體" : 26
    "外鏈跳轉" : 16
    "直接訪問" : 10

圓餅圖 (Pie Chart)

👉 Git 分支圖 (Git Graph)

gitGraph
    commit id: "v1.0.0"
    branch feature-editor
    checkout feature-editor
    commit id: "Add Tiptap"
    commit id: "Add Mermaid"
    checkout main
    merge feature-editor id: "Merge feature"
    commit id: "v1.1.0" tag: "v1.1.0"

Git 分支圖 (Git Graph)

2. PlantUML (UML 建模語言)

在專業軟體架構中，FlashNote 同樣相容標準 PlantUML 文本標記：

@startuml
skinparam handwritten false
actor User
boundary Browser
control Server
database Database

User -> Browser: 打開 FlashNote
Browser -> Server: 請求文章目錄
Server -> Database: 查詢索引
Database --> Server: 返回元數據
Server --> Browser: 呈現樹狀視界
@enduml

三、 高級文檔標記 (FrontMatter & Callouts)

1. YAML FrontMatter (文章屬性頭)

在靜態部落格直通與書籍編譯時，置於文檔最頂部的 YAML 頭用於承載核心結構化元數據：

---
title: 現代前端工程化架構實戰
date: 2026-10-14 10:00:00
categories:
  - 架構設計
tags:
  - TypeScript
  - Vite
  - Astro
author: Fisher
published: true
---

2. 標註與提示塊 (GitHub / Obsidian Callouts)

使用引用語法配合 [!TYPE] 聲明醒目的提示警告卡片：

Note

這是一條普通背景註釋，用於補充技術細節。

Tip

效能優化建議：啟用本地快取可使離線圖片載入提速 80%。

Important

核心前提條件：使用雲端差量同步前請確保 API Token 具備寫入權限。

Warning

警告：修改主鍵將觸發歷史版本級聯重算，請謹慎操作。

Danger

危險操作：清空本地資料庫將徹底銷毀 IndexedDB 實體。

四、 排版與學術擴充

1. KaTeX 複雜數學矩陣與方程式

行內公式形如 f(x)=∫−∞xe−t2dtf(x) = \int_{-\infty}^x e^{-t^2} dt，大型塊級公式：

[cos⁡θ−sin⁡θ0sin⁡θcos⁡θ0001][xyz]=[x′y′z′]\begin{bmatrix} \cos\theta & -\sin\theta & 0 \\ \sin\theta & \cos\theta & 0 \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ z \end{bmatrix} = \begin{bmatrix} x' \\ y' \\ z' \end{bmatrix}

2. 任務列表與富文本擴充

  • 側邊欄即開即寫
  • 4 種視界形態切換
  • 德·摩根律 LaTeX 符號轉 Unicode
  • 支援更多三方圖床外掛