Cinderfolio-Pele

Pele 将 Mermaid 渲染为 SVG。选择图例后调整配色，观察对应的文字、结构与填充。

深色g0#121212

浅色g16bg#fafaf8

品牌色brand#f97316

框线与结构

分类与实底

透明与叠色

强调与状态

流程图

时序图

类图

状态图

实体关系图

块图

C4 架构图

数据包图

需求图

架构图

鱼骨图

语法铁路图

泳道图

目录树

用例图

查看 Mermaid 源码

flowchart LR
    subgraph 分组
        A[输入] --> B[处理]
    end
    B --> C[输出]

查看 Mermaid 源码

sequenceDiagram
    participant 用户
    participant 服务
    用户->>服务: 请求
    activate 服务
    Note over 用户,服务: 次要说明
    服务-->>用户: 结果
    deactivate 服务

查看 Mermaid 源码

classDiagram
    class Item {
        +String title
        +save()
    }
    class Note {
        +String body
    }
    Item <|-- Note
    note for Note "次要说明"

查看 Mermaid 源码

stateDiagram-v2
    direction LR
    [*] --> 待处理
    state 待处理 {
        校验 --> 保存
    }
    待处理 --> 完成: 提交
    完成 --> [*]

查看 Mermaid 源码

erDiagram
    USER ||--o{ NOTE : writes
    USER {
        int id PK
        string name
    }
    NOTE {
        int id PK
        int user_id FK
    }

查看 Mermaid 源码

C4Component
    Component(api, "接口", "HTTP", "接收请求")
    ContainerDb(db, "存储", "SQL", "保存数据")
    Rel(api, db, "写入")

查看 Mermaid 源码

requirementDiagram
    direction LR
    requirement theme {
        id: 1
        text: readable
        risk: low
        verifymethod: test
    }
    element preview {
        type: sample
    }
    preview - satisfies -> theme

查看 Mermaid 源码

swimlane-beta LR
    subgraph 用户
        request[提交]
        receive[接收]
    end
    subgraph 服务
        save[保存]
    end
    request --> save --> receive

查看 Mermaid 源码

usecase-beta
    direction LR
    actor Reader
    systemBoundary Notes
        Read("阅读")
        Edit("编辑")
    end
    Reader --> Read
    Reader --> Edit
    Edit ..> : include Read

饼图

思维导图

Git 提交图

象限图

时间线

用户旅程图

XY 图

矩形树图

查看 Mermaid 源码

pie
    "1" : 1
    "2" : 1
    "3" : 1
    "4" : 1
    "5" : 1
    "6" : 1
    "7" : 1
    "8" : 1

查看 Mermaid 源码

gitGraph
    commit id: "起点"
    branch feature
    commit id: "功能"
    checkout main
    branch docs
    commit id: "文档"
    checkout main
    merge feature id: "合并"

查看 Mermaid 源码

---
config:
  quadrantChart:
    chartWidth: 360
    chartHeight: 280
---
quadrantChart
    x-axis 低 --> 高
    y-axis 低 --> 高
    quadrant-1 推进
    quadrant-2 试验
    quadrant-3 观察
    quadrant-4 改进
    A: [0.3, 0.7]
    B: [0.7, 0.6]
    C: [0.4, 0.3]

查看 Mermaid 源码

journey
    section 准备
        阅读: 5: 用户
        配色: 3: 用户, 设计
    section 完成
        检查: 1: 设计

查看 Mermaid 源码

---
config:
  treemap:
    nodeWidth: 44
    nodeHeight: 24
---
treemap-beta
"内容"
    "笔记"
        "基础": 4
        "进阶": 3
    "项目"
        "设计": 2
        "开发": 3

雷达图

韦恩图

桑基图

事件建模图

智能体流程图

Cynefin 框架图

查看 Mermaid 源码

---
config:
  radar:
    width: 360
    height: 260
---
radar-beta
    axis text["文字"], line["连线"], fill["填充"], border["描边"]
    curve a["方案 A"]{4, 2, 4, 3}
    curve b["方案 B"]{2, 4, 3, 4}
    graticule polygon
    max 5

查看 Mermaid 源码

venn-beta
    set A["文字"]
        text A1["清晰"]
    set B["图形"]
        text B1["协调"]
    union A,B["重叠"]
        text AB1["可读"]

查看 Mermaid 源码

---
config:
  sankey:
    width: 440
    height: 240
    showValues: false
---
sankey
Input A,Process,4
Input B,Process,3
Process,Output,7

查看 Mermaid 源码

agentflow-beta LR
    flow input["输入组"]
        receive["接收"]@{ shape: input }
    end
    flow output["处理组"]
        check["校验"]@{ shape: task }
        save["保存"]@{ shape: action }
        check --> save
    end
    receive --> check

查看 Mermaid 源码

---
config:
  cynefin:
    width: 440
    height: 280
    showDomainDescriptions: false
---
cynefin-beta
    complex
        "探索"
    complicated
        "分析"
    clear
        "执行"
    chaotic
        "应急"
    complex --> complicated : "识别"
    chaotic --> clear : "稳定"

甘特图

看板

Wardley 地图

查看 Mermaid 源码

---
config:
  gantt:
    useWidth: 520
    leftPadding: 64
    rightPadding: 16
---
gantt
    dateFormat YYYY-MM-DD
    axisFormat %m-%d
    todayMarker off
    section 任务
        普通任务 :normal, 2026-01-01, 4d
        进行中   :active, current, 2026-01-02, 4d
        已完成   :done, finished, 2026-01-01, 3d
        关键任务 :crit, important, 2026-01-03, 4d

查看 Mermaid 源码

kanban
    待处理
        normal[普通任务]
        critical[关键任务]@{ priority: 'Very High' }
    进行中
        active[更新主题]@{ priority: 'High', assigned: '设计' }

查看 Mermaid 源码

---
config:
  wardley-beta:
    width: 520
    height: 300
---
wardley-beta
    anchor User [0.95, 0.5]
    component App [0.75, 0.3]
    component Storage [0.4, 0.5]
    User -> App
    App -> Storage
    evolve Storage 0.8

显示职责

分类色以品牌色为起点，使用 OKLCH 生成八色，并对色觉模拟中的明显冲突作小幅校正；暗色主题保持同一类别顺序并降低明度。图例沿用原生透明度，实底文字随深浅端点适配。

画布与结构

画布bg#fafaf8
g16 · SVG 画布
主文字#121212
g0 · 标题、节点与图例文字
次要文字#3e3e3d
g3 · 说明、数值与轴标签
连线#3e3e3d
g3 · 连线、箭头与坐标轴
节点底色#ececea
g15 · 节点、卡片与表格
分组底色#dddddb
g14 · 分组、泳道与交替行
描边#787877
g7 · 节点与分组边界

强调与状态

强调#fa9148
light · 普通任务、票号与演化箭头
关键状态#f97316
brand · 关键任务与看板高优先级
错误文字#121212
g0 · 渲染错误信息

分类色

1#cf9600
2#92bb54
3#16dea9
4#00b8ba
5#85c4ff
6#a69bff
7#df83de
8#fd7b98

#Cinderfolio-Pele

画布与结构

强调与状态

分类色

Cinderfolio-Pele