🚀 扩展 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

👉 时序图 (Sequence Diagram)

sequenceDiagram
    participant 用户
    participant 前端
    participant 后端
    participant 数据库

    用户->>前端: 点击登录
    前端->>后端: 发送请求 (POST /login)
    后端->>数据库: 查询用户信息
    数据库-->>后端: 返回用户数据
    后端-->>前端: 返回 Token
    前端-->>用户: 登录成功，跳转首页

👉 甘特图 (Gantt Chart)

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析           :a1, 2023-10-01, 3d
    UI设计             :after a1, 5d
    section 开发
    前端开发           :2023-10-10, 10d
    后端开发           :2023-10-10, 12d
    section 测试
    集成测试           :2023-10-25, 5d

饼图 (Pie Chart)

pie title 市场份额分布
    "产品 A" : 40
    "产品 B" : 30
    "产品 C" : 20
    "其他" : 10

👉 类图 (Class Diagram)

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    class Cat {
        +climb()
    }
    Animal <|-- Dog
    Animal <|-- Cat

2. PlantUML

PlantUML 是另一种强大的绘图工具，语法与 Mermaid 不同，通常用于更复杂的 UML 图。 (注意：需要编辑器支持 PlantUML 渲染，如 Typora 需配置，或 VS Code 插件)

👉 时序图示例

@startuml
actor 用户
participant "Web Server" as WS
database "Database" as DB

用户 -> WS: 请求数据
WS -> DB: 查询 SQL
DB --> WS: 返回结果
WS --> 用户: JSON 数据
@enduml

👉 用例图示例

@startuml
left to right direction
actor 顾客
actor 管理员

rectangle 购物系统 {
  usecase "浏览商品" as UC1
  usecase "加入购物车" as UC2
  usecase "结算" as UC3
  usecase "管理库存" as UC4
}

顾客 --> UC1
顾客 --> UC2
顾客 --> UC3
管理员 --> UC4
@enduml

3. LaTeX (数学/排版)

用于编写复杂的数学公式、化学方程式或学术排版。

** 行内公式** 质能方程 $E=mc^2$，勾股定理 $a^2 + b^2 = c^2$。

👉 块级公式 (独立显示)

👉 矩阵 (Matrix)

👉 分段函数 (Cases)

👉 积分与求和

三、 文档与高级元数据标记 (Document / Markup)

除了交互图表与数学公式外，FlashNote 还支持多种高级结构化元数据与排版扩展标记：

1. Front Matter (YAML 头信息)

通常放在文档的最开头，用于定义文章的元数据（标题、日期、标签、分类等），常用于博客系统（如 Hexo, Hugo, Jekyll）。

---
title: "Markdown 扩展语法指南"
date: 2023-10-27
author: "Qwen"
tags:
  - Markdown
  - Tutorial
  - Diagrams
category: "技术文档"
description: "这是一个关于 Mermaid, LaTeX 和 PlantUML 的详细示例。"
---

# 正文开始

这里是文章的内容...

2. 高级文本标记 (Advanced Text Markup)

👉 高亮文本 (Highlight) (语法：==文本==，部分编辑器如 Typora/Obsidian 支持) 这是一段普通文本，其中 这部分被高亮显示了，用于强调重点。

👉 下标与上标 (Subscript & Superscript) (语法：~下标~ 和 ^上标^)

• 化学式：H₂O (水), CO₂ (二氧化碳)
• 数学：X² (X的平方), 10⁶ (10的6次方)
• 日期：2023^th October

👉 键盘按键 (Keyboard Keys) (使用 HTML 标签 <kbd>) 请使用 Ctrl + C 复制，或使用 Cmd + V 粘贴。

3. 脚注 (Footnotes)

(语法：[^id] 和 [^id]: 内容) 这是一个带有脚注的句子¹。这里还有另一个脚注²。

4. 定义列表 (Definition Lists)

(语法：术语后跟 : 定义，部分扩展支持) Markdown : 一种轻量级标记语言，允许人们使用易读易写的纯文本格式编写文档。

HTML : 超文本标记语言，用于创建网页的标准标记语言。

5. 警告/提示块 (Callouts / Admonitions)

(GitHub 风格或 Obsidian 风格，用于突出显示注意事项)

💡 总结与建议

1. Mermaid 是目前兼容性最好的图表工具，GitHub、GitLab、Notion、Typora 都原生支持。
2. LaTeX 公式在学术写作中必不可少，编辑器已经开启了 MathJax 和 KaTeX 渲染。
3. PlantUML 功能非常强大（支持几十种图），但配置相对麻烦，不推荐使用。
4. Front Matter 对于搭建个人博客（Hexo/Hugo）是必须的。