图表语法

本站已集成图表围栏插件，写文档时直接用代码块即可产出图形，不需要截图或外链图片。所有图形配色取主题 CSS 变量，明暗主题自动跟随，宽度不足时横向滚动。

围栏渲染成适用场景
```mermaidMermaid 12 图形流程图、泳道图、时序图、状态图、ER 图、思维导图、饼图、象限图、甘特图
```pyramid分层金字塔层级自顶向下展开（架构分层、依赖层次、优先级）

图题写法：在围栏语言后接一行文字作为标题。

```mermaid 图 1 · 请求鉴权判定
flowchart TD
  A["请求"] --> B{"通过鉴权?"}
  B -- 是 --> C["进入 Controller"]
  B -- 否 --> D["401"]
```

```pyramid 架构分层 同理。下面每个示例都是本站真实使用过的图形，可直接复制改字。

流程图

图 1 · 一次请求的鉴权与响应链路

要点：{"文本"} 是判定节点，["文本"] 是矩形节点，标签含中文标点或括号时一定要用引号包住；分支标签用 -- 是 --> 形式。

泳道图

用 subgraph 表示泳道，跨泳道连线体现职责交接。

图 2 · 新增业务域的三泳道交接

时序图

图 3 · 渠道报表同步的两条触发路径

要点：->> 实线箭头表示请求，-->> 虚线表示返回，loop / alt / opt 表达循环与分支，autonumber 自动编号。

状态图

图 4 · 导出任务生命周期（system_export_task.status）

ER 图

图 5 · RBAC 核心表关系

思维导图

图 6 · Asone 技术栈全景

饼图

图 7 · 全量 DDL 的 42 张表按域分布

象限图

图 8 · 文档同步优先级（影响面 × 失效速度）

甘特图

图 9 · 一次迭代的推荐上线编排（相对节奏，非固定工期）

金字塔

pyramid 每行一层，自顶向下逐层变宽，格式 层名 | 说明，# 开头的行忽略。

  1. 1使用者运营与管理员浏览器、开放 API 调用方
  2. 2接入层OpenResty 反向代理、HTTPS 证书、静态资源
  3. 3接口层asone-front 页面与 /api 控制器
  4. 4领域层advertisement / channel-report / iaa 业务模块
  5. 5内核层asone-server-system 鉴权、审批、通知、导出、通用配置
  6. 6基础设施MySQL、Redis、OSS、SMTP、XXL-JOB、渠道开放 API
图 10 · 运行时分层（自上而下）

同一张图也能表达依赖方向：上层依赖下层，业务模块之间不互相依赖。

  1. 1asone-server-boot唯一启动模块，聚合全部业务模块
  2. 2业务模块advertisement、channel-report、iaa（互相不依赖）
  3. 3asone-server-system共享内核：安全、审批、通知、导出、工具
  4. 4框架与中间件Spring Boot、MyBatis-Plus、Redis、MySQL
图 11 · 后端模块依赖层次

写作约定

  • 一图一事：一张图只说明一个结论，超过 15 个节点就拆图或改成分层金字塔。
  • 判定节点要有显式 id：写 Q{"条件?"} 后用 Q -- 是 --> 引用；A -->{"条件?"} 这种匿名节点无法被二次引用，会导致解析失败。
  • 节点 id 避开保留字：style、click、end、graph、subgraph、class、link 等不能当节点 id（例如 B --> style["style"] 直接 Parse error），改用 sty、ndStyle 之类的别名，标签文字仍写原词。
  • 中文标签加引号：节点文字含 ()、[]、:、, 等符号时用引号包住，否则解析失败；换行用 <br/>。
  • 图文配套：图前后必须有正文解释，图不能是唯一信息源；Mermaid 渲染失败时页面会降级显示源码，正文仍要能读懂。
  • 不写凭据：图里不出现口令、token、内网地址；需要标识环境时写「生产 / 本地」。
  • 改图即改字：图形与正文描述同一个事实，改动其中一处必须同步另一处，见文档同步规则。
  • 构建不校验图形语法：pnpm build 只渲染容器，语法错误要在浏览器里看（渲染失败会显示源码与错误说明），改完图务必开 pnpm dev 目检。