> For AI agents: the complete documentation index is available at https://shijin.space/llms.txt, the full documentation bundle is available at https://shijin.space/llms-full.txt. # Cinderfolio-Pele [Pele](https://github.com/obsidianmd/pele) 将 Mermaid 渲染为 SVG。选择图例后调整配色，观察对应的文字、结构与填充。 **深色**`g0``#121212` 默认 **浅色**`g16`bg`#fafaf8` 默认 **品牌色**`brand``#f97316` 默认 亮色 · 全网页生效 [下载 cf-pele.css](https://shijin.space/cinderfolio/cf-pele.css) **框线与结构** **流程图** ```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 block columns 2 block:group:2 columns 2 a["输入"] b["处理"] end c["节点"] d["输出"] ``` **C4 架构图** ```mermaid C4Component Component(api, "接口", "HTTP", "接收请求") ContainerDb(db, "存储", "SQL", "保存数据") Rel(api, db, "写入") ``` **数据包图** ```mermaid --- config: packet: bitsPerRow: 16 --- packet 0-3: "版本" 4-7: "标记" 8-15: "长度" 16-31: "载荷" ``` **需求图** ```mermaid requirementDiagram direction LR requirement theme { id: 1 text: readable risk: low verifymethod: test } element preview { type: sample } preview - satisfies -> theme ``` **架构图** ```mermaid architecture-beta group app(cloud)[服务组] service api(server)[接口] in app service db(database)[存储] in app api:R -- L:db ``` **鱼骨图** ```mermaid ishikawa-beta 可读性 文字 字色 字号 图形 描边 底色 ``` **语法铁路图** ```mermaid railroad-ebnf-beta value = "数值" ( ( "+" | "-" ) "数值" )* ; ``` **泳道图** ```mermaid swimlane-beta LR subgraph 用户 request[提交] receive[接收] end subgraph 服务 save[保存] end request --> save --> receive ``` **目录树** ```mermaid treeView-beta src/ theme.ts colors.css README.md ``` **用例图** ```mermaid usecase-beta direction LR actor Reader systemBoundary Notes Read("阅读") Edit("编辑") end Reader --> Read Reader --> Edit Edit ..> : include Read ``` **分类与实底** **饼图** ```mermaid pie "1" : 1 "2" : 1 "3" : 1 "4" : 1 "5" : 1 "6" : 1 "7" : 1 "8" : 1 ``` **思维导图** ```mermaid mindmap root[主题] 分支一 分支二 分支三 分支四 ``` **Git 提交图** ```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 timeline section 准备 计划 : 范围 section 实施 执行 : 交付 ``` **用户旅程图** ```mermaid journey section 准备 阅读: 5: 用户 配色: 3: 用户, 设计 section 完成 检查: 1: 设计 ``` **XY 图** ```mermaid --- config: xyChart: width: 440 height: 280 --- xychart x-axis [A, B, C, D] y-axis 0 --> 10 bar [3, 6, 4, 8] line [5, 4, 7, 6] ``` **矩形树图** ```mermaid --- config: treemap: nodeWidth: 44 nodeHeight: 24 --- treemap-beta "内容" "笔记" "基础": 4 "进阶": 3 "项目" "设计": 2 "开发": 3 ``` **透明与叠色** **雷达图** ```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 eventmodeling timeframe 01 ui View timeframe 02 command Save timeframe 03 event Saved ``` **智能体流程图** ```mermaid agentflow-beta LR flow input["输入组"] receive["接收"]@{ shape: input } end flow output["处理组"] check["校验"]@{ shape: task } save["保存"]@{ shape: action } check --> save end receive --> check ``` **Cynefin 框架图** ```mermaid --- config: cynefin: width: 440 height: 280 showDomainDescriptions: false --- cynefin-beta complex "探索" complicated "分析" clear "执行" chaotic "应急" complex --> complicated : "识别" chaotic --> clear : "稳定" ``` **强调与状态** **甘特图** ```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: '设计' } ``` **Wardley 地图** ```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`