Mermaid 在线编辑器

流程图：方向、节点形状、条件分支

TD 从上到下，LR 从左到右。方框 [ ]、圆角 ( )、菱形 { }、平行四边形 / /、子图用 subgraph。

flowchart LR
  U[用户] --> S{命中缓存?}
  S -- 是 --> C[直接返回]
  S -- 否 --> O[回源] --> W[写缓存] --> C
  subgraph 边缘
    C
    W
  end

时序图：谁先调谁、同步还是异步

->> 实线箭头，-->> 虚线返回，activate 画生命线，alt / else 表示分支，loop 表示循环，note over 加注释。

sequenceDiagram
  autonumber
  participant B as 浏览器
  participant P as Pages
  B->>P: GET /wallpaper/2026-10-06/
  activate P
  P-->>B: 200 HTML（边缘缓存命中）
  deactivate P
  alt 首次访问
    P->>P: 生成静态页
  end
  note over B,P: 页面里没有后端接口，图全靠浏览器渲染

类图与 ER 图：结构和关系

classDiagram
  class Site { +String name +render() }
  class Cat { +String name +Link[] web }
  class Link { +String title +String url }
  Site --> Cat : 包含
  Cat "1" --> "*" Link : 列表
  Link ..> Site : 回到首页

erDiagram
  CAT ||--|{ WEB : 归类
  CAT { string name }
  WEB { string title string url }
  USER ||--o{ CUSTOM : 自定义

甘特图：先写 dateFormat，再写任务

section 分组，任务行格式是 状态, id, 起始, 时长。起始可以是日期，也可以是 after 别的id。

gantt
  title 起始页改版排期
  dateFormat YYYY-MM-DD
  section 内容层
    壁纸快照      :done, a1, 2026-09-21, 8d
    双语档案上线  :done, a2, after a1, 6d
  section 工具页
    Mermaid 编辑器 :active, b1, 2026-10-06, 5d
    语法速查与 FAQ :b2, after b1, 3d

状态图：入口、转移、退出

stateDiagram-v2
  [*] --> 折叠
  折叠 --> 展开 : 点击卡片
  展开 --> 折叠 : 点击别处
  展开 --> 编辑 : 点铅笔
  编辑 --> 展开 : 保存
  折叠 --> [*]

思维导图、时间线、旅程、象限、饼图

mindmap
  root((起始页))
    流量
      壁纸档案
      工具页
    留存
      自定义站点
      本地草稿

timeline
  title 版本要点
  2026-09 : 站点数据同域化 : 天气改 Open-Meteo
  2026-10 : 双语壁纸档案 : 站点行可编辑

journey
  title 新访客第一次用起始页
  section 打开
    看到当日壁纸: 5: 访客
    找到常用站: 3: 访客
  section 自定义
    添加自己的站: 4: 访客
    换设备后丢失: 1: 访客

quadrantChart
  title 功能优先级
  x-axis 成本低 --> 成本高
  y-axis 流量小 --> 流量大
  quadrant-1 优先做
  quadrant-2 慢慢做
  quadrant-3 不做
  quadrant-4 看情况
  Mermaid 工具页: [0.32, 0.66]
  壁纸收藏夹: [0.2, 0.3]

pie showData
  title 流量来源
  "搜索" : 42
  "直接" : 31
  "外链" : 17
  "其他" : 10