火一五流程图技能 v1.3.0
2026 现代美学的流程图 / 架构图 / 泳道图 / C4 架构图 / 时序图生成器 — 青岛火一五信息科技有限公司
设计取向：Linear / Vercel / Radix / Stripe 软色系 + 双层柔和阴影 + 圆角节点 + 判断菱形 accent 强调色 + PDF 单页自适应。
一、核心能力
1.1 支持的图表类型
| type | 用途 | 渲染引擎 | draw.io |
|---|
flowchart | 普通流程图 | Mermaid | ✅ |
architecture | 系统架构图（支持 Tier 分层） | Mermaid | ✅ |
swimlane | 真·泳道图（PlantUML） | PlantUML | ❌ |
swimlane_mermaid | 泳道风格（Mermaid，不需要 Java） | Mermaid | ✅ |
sequence | 时序图 | Mermaid/PlantUML | ✅ |
state | 状态图 | Mermaid | ✅ |
gantt | 甘特图 | Mermaid | ✅ |
er | ER 图 | Mermaid | ✅ |
class | UML 类图 | Mermaid | ✅ |
journey | 用户旅程 | Mermaid | ✅ |
pie | 饼图 | Mermaid | ✅ |
c4_context | C4 上下文图（L1） | Mermaid / PlantUML | ✅ |
c4_container | C4 容器图（L2） | Mermaid / PlantUML | ✅ |
mindmap | 简单思维导图 | Mermaid | ✅ |
1.2 输出格式
| 格式 | 类型 | 说明 |
|---|
.svg | 矢量图 | 浏览器直接打开，最推荐 |
.png | 位图 | 适合 PPT / 文档 |
.pdf | 矢量 PDF | 适合打印 |
.mmd | Mermaid 源码 | 复制到 mermaid.live 编辑 |
.puml | PlantUML 源码 | 复制到 PlantUML 编辑器 |
.drawio | draw.io 源文件 | 用 draw.io 桌面版打开，精美编辑 |
.dot | Graphviz DOT 源码 | 复杂网络拓扑 |
1.3 十种风格（v1.3 全面改造为 2026 现代美学）
| key | 名称 | 设计范式 | 适用场景 | 中文别名 |
|---|
modern | 现代商务 | Radix Indigo/Slate，浅底 + 靛紫描边 + 琥珀判断 | 默认首选，商务/技术文档 | 现代、商务、linear、vercel |
classic | 经典稳重 | 淡蓝卡 + 深蓝字 + 琥珀强调 | 咨询报告、正式汇报 | 经典、稳重 |
dark | 暗色霓虹 | Linear Dark，深底 + 紫霓虹描边 + 青色 accent | 演示大屏、技术分享 | 暗色、黑色、霓虹、linear-dark |
xiaohongshu | 小红书暖奶油 | 奶油底 + 粉卡节点 + 玫红描边 | 种草封面、女性向运营 | 小红书、奶油、xhs |
ocean | 海洋蓝 | 浅天蓝节点 + 深蓝字 + 橙色 accent | SaaS 产品、技术架构 | 海洋、蓝、蓝色 |
forest | 森林绿 | 浅绿卡 + 墨绿字 + 橙色 accent | 环保、农业、健康 | 森林、绿、自然 |
sunset | 夕阳暖橙 | 浅橙卡 + 赭红字 + 青色 accent | 运营活动、温暖叙事 | 夕阳、暖橙、橙 |
minimal | 极简素雅 | Notion 风，近白底 + 深灰字 + 单蓝 accent + 细描边 | 学术论文、出版物、技术书稿 | 极简、素雅、学术、论文、黑白、notion |
pastel | 马卡龙粉嫩 | 浅紫底 + 深紫字 + 玫粉 accent | 儿童教育、女性向 | 马卡龙、粉嫩、粉、儿童 |
github | 极客 GitHub | 浅蓝卡 + 品牌蓝 + 绿色 accent | 开源 README、技术文档 | 极客、程序员、gh |
设计共性（所有风格统一遵循）：
- 节点：浅色填充 + 彩色描边 + 深色文字，12px 圆角，1.5px 描边
- 阴影：双层 drop-shadow（近 1/2px + 远 4/12px），模拟 Linear/Vercel 的浮起质感
- 判断菱形：统一用
accent_color 突出，区别于普通节点
- 数据库圆柱：
secondary_color 填充，区别于业务节点
- 字体：Inter 优先 + PingFang SC/HarmonyOS Sans 回落，节点
font-weight: 500，标题 600
- 连线：
basis 曲线（flowchart/C4）/ linear（泳道）/ 端点圆角
- 间距：
nodeSpacing: 60、rankSpacing: 80、padding: 20（更透气）
1.4 draw.io 精美增强
- 导出
.drawio 源文件，用 draw.io 桌面版打开
- draw.io 支持：渐变填充、投影、圆角、图标嵌入
- draw.io 支持 Google Fonts（Mermaid 不支持的中文字体）
- 配合
--theme / --font / --shadow 参数生成精美效果
二、快速开始
2.1 准备渲染器
# 方案 A：Mermaid（推荐，覆盖 90% 场景）
npm i -g @mermaid-js/mermaid-cli
# 方案 B：PlantUML（C4-PlantUML / 泳道图必须）
brew install plantuml # macOS
# apt install plantuml # Ubuntu/Debian
# 方案 C：Graphviz（网络拓扑可选）
brew install graphviz
# Python 依赖
pip install pyyaml
2.2 最短上手
# 从 YAML 规格生成 PNG（默认 modern 风格）
python3 scripts/create-flow-chart.py \
-i examples/architecture.yaml \
-o /tmp/arch.png
# 泳道图（真·PlantUML）
python3 scripts/create-flow-chart.py \
-i examples/swimlane.yaml \
-o /tmp/lane.svg
# 导出 draw.io 源文件（精美编辑）
python3 scripts/create-flow-chart.py \
-i examples/architecture.yaml \
-o /tmp/arch.drawio
# 同时导出多种格式（一键到位）
python3 scripts/create-flow-chart.py \
-i examples/architecture.yaml \
-o /tmp/arch.png \
--export-formats svg,pdf,mmd,drawio
# draw.io 精美主题（带投影）
python3 scripts/create-flow-chart.py \
-i examples/architecture.yaml \
-o /tmp/arch.png \
--theme modern --font "Microsoft YaHei" --shadow
# C4-PlantUML（专业 C4 图）
python3 scripts/create-flow-chart.py \
-i examples/c4_context.yaml \
-o /tmp/c4.puml \
--engine plantuml
三、YAML 规格速查
3.1 流程图 flowchart
type: flowchart
title: 用户下单流程
direction: TB # TB | LR | BT | RL
nodes:
- { id: start, label: 开始, shape: stadium }
- { id: check, label: 是否有商品?, shape: diamond }
- { id: pay, label: 结算付款 }
edges:
- { from: start, to: check }
- { from: check, to: pay, label: 是 }
形状：rect / round / stadium / diamond（判断） / hexagon / circle / cylinder（数据库） / subroutine / parallelogram / trapezoid
边类型：solid（实线）/ dashed（虚线）/ thick（粗线）/ dotted（点线）/ bidir（双向）
3.2 系统架构图 architecture（支持 Tier 分层）
方式一：groups 分组
type: architecture
title: 火一五 SaaS 系统架构
groups:
- { id: frontend, label: 前端层, children: [web, mobile] }
- { id: backend, label: 业务层, children: [svc_user, svc_order] }
- { id: data, label: 数据层, children: [pg, redis] }
nodes:
- { id: web, label: Web 门户 }
- { id: pg, label: PostgreSQL, shape: cylinder }
edges:
- [web, svc_user]
- [svc_user, pg]
方式二：tiers 分层（推荐，层次更清晰）
type: architecture
title: 系统架构（Tier 分层）
tiers:
- { id: edge, label: 边缘层 }
- { id: biz, label: 业务层 }
- { id: data, label: 数据层 }
nodes:
- { id: cdn, label: CDN, tier: edge }
- { id: api, label: API 网关, tier: biz }
- { id: pg, label: PostgreSQL, tier: data, shape: cylinder }
edges:
- [cdn, api]
- [api, pg]
3.3 泳道图 swimlane（真·PlantUML）
type: swimlane
title: 采购审批流程
lanes:
- name: 申请人
steps:
- { id: A1, label: 填写采购申请 }
- { id: A2, label: 提交审批 }
- name: 部门经理
steps:
- { id: B1, label: 初审 }
edges:
- [A1, A2]
- [A2, B1]
3.4 时序图 sequence
type: sequence
title: 用户登录
auto_number: true
nodes:
- { id: U, label: 用户, shape: actor }
- { id: FE, label: 前端 }
- { id: BE, label: 后端 }
edges:
- { from: U, to: FE, label: 点击登录 }
- { from: FE, to: BE, label: POST /login }
- { from: BE, to: FE, label: JWT token, kind: dashed }
notes:
- { position: over, over: BE, text: "首次登录自动建账" }
3.5 状态图 state
type: state
title: 订单状态机
direction: LR
nodes:
- { id: Pending, label: 待付款 }
- { id: Paid, label: 已付款 }
edges:
- { from: "[*]", to: Pending, label: 下单 }
- { from: Pending, to: Paid, label: 付款 }
3.6 甘特图 gantt
type: gantt
title: Q2 路线图
dateFormat: YYYY-MM-DD
axisFormat: "%m-%d"
sections:
- name: 基建
tasks:
- { name: 服务器扩容, id: i1, status: done, start: 2026-04-01, duration: 5d }
- { name: 监控升级, id: i2, status: active, start: 2026-04-06, duration: 10d }
状态值：done / active / crit（关键路径红）/ milestone（里程碑）/ 留空即未开始。
3.7 C4 架构图 c4_context / c4_container
Mermaid 引擎（默认）
type: c4_context
title: 火一五 SaaS 上下文图
nodes:
- { id: customer, label: 企业客户\n使用 SaaS, shape: person }
- { id: huo15, label: 火一五 SaaS\n企业数字化平台, shape: system }
- { id: wecom, label: 企业微信\nIM, shape: system_ext }
edges:
- { from: customer, to: huo15, label: 使用 }
- { from: huo15, to: wecom, label: OAuth }
PlantUML 引擎（C4-PlantUML，更专业）
python3 scripts/create-flow-chart.py \
-i examples/c4_context.yaml \
-o /tmp/c4.puml \
--engine plantuml
C4 shape：person / person_ext / system / system_ext / container / container_db / component。
3.8 ER 图 / UML 类图 / 用户旅程 / 饼图
er — ER 图，label 用 \n 分隔字段class — UML 类图，edge kind 支持 extends / implements / composition / aggregation / dependencyjourney — 用户旅程，用 sections[].tasks[]pie — 饼图，用 items 数组
四、命令行参数
| 参数 | 说明 |
|---|
-i, --input | 输入文件（yaml/json/mmd/puml/dot） |
-o, --output | 输出路径（.svg/.png/.pdf/.mmd/.puml/.dot/.drawio） |
--export-formats | 附加输出格式，逗号分隔。如 svg,pdf,mmd,drawio |
--export-dir | 源文件输出目录，默认与主输出同目录 |
--style | 风格：modern/classic/dark/xiaohongshu/ocean/forest/sunset/minimal/pastel/github |
--theme | draw.io 主题（与 --style 对应，影响 draw.io 导出效果） |
--font | 字体名称，默认 PingFang SC（Mac）/ Microsoft YaHei（Win） |
--shadow | 为 draw.io 节点添加投影效果 |
--engine | 强制渲染引擎：mermaid / plantuml / dot / drawio / auto |
--width, --height | 输出尺寸（像素） |
--background | 背景色，默认用 style 的 background |
--dump-source | 只打印源码到 stdout，不渲染（仅 draw.io 输出时生效） |
--no-pdf-fit | 取消 PDF 自适应画布（默认自适应，单页输出，不分页） |
五、Python API
import sys; sys.path.insert(0, 'scripts')
from flowchart_core import parse, to_mermaid, to_plantuml, to_drawio
from flowchart_render import render
from styles import get_style, to_mermaid_init_directive, to_plantuml_skinparam
fc = parse('spec.yaml')
style = get_style('modern') # 也可传中文别名：'现代' / 'linear' / 'vercel'
# Mermaid（推荐：同时传 style，自动启用 decision / database classDef）
init = to_mermaid_init_directive(style, diagram_type=fc.diagram_type)
code = to_mermaid(fc, init, style=style)
render(code, '/tmp/out.svg', engine='mermaid')
# PDF 单页自适应（默认开启；传 pdf_fit=False 关闭）
render(code, '/tmp/out.pdf', engine='mermaid', pdf_fit=True)
# draw.io（现代风：渐变 + 圆角 + 阴影）
drawio_xml = to_drawio(fc, style=style, theme='modern',
font_family='Inter', shadow=True)
render(drawio_xml, '/tmp/out.drawio', engine='mermaid')
# C4-PlantUML
puml = to_plantuml(fc, to_plantuml_skinparam(style))
render(puml, '/tmp/out.puml', engine='plantuml')
主要接口：
| 函数 | 说明 |
|---|
parse(path_or_text, hint='auto') | YAML/JSON/Mermaid/PlantUML/DOT → FlowChart |
to_mermaid(fc, init_directive, style=None) | → Mermaid 源码；传 style 启用自动 classDef |
to_plantuml(fc, skinparam) | → PlantUML/C4-PlantUML 源码 |
to_dot(fc, style) | → Graphviz DOT |
to_drawio(fc, style, theme, font_family, shadow=True) | → draw.io XML 源码（v1.3 现代风格） |
render(source, out, engine, pdf_fit=True) | 调用 mmdc/plantuml/dot 渲染，PDF 默认单页自适应 |
get_style(key) | 获取 Style 对象（中文别名也能识别） |
to_mermaid_init_directive(style, diagram_type='flowchart') | 返回 %%{init: ...}%%；按图类选曲线 |
to_plantuml_skinparam(style) | 返回 PlantUML skinparam 配色指令 |
decision_classdef(style) / database_classdef(style) | v1.3 新增：生成 classDef 行 |
六、与其他技能的边界
| 需求 | 用哪个技能 |
|---|
| 自由层级的思维导图，要导出 XMind | huo15-mind-map |
| 流程图 / 架构图 / 泳道图 / 时序图 / C4 图 | huo15-flow-chart（本技能） |
| 精美架构图（渐变/投影/圆角），本地编辑 | huo15-flow-chart + draw.io 导出 |
| 工程制图 / 原型图 | 不在范围内，建议 draw.io / Figma |
| 数据仪表盘 | 用图表库（Chart.js / ECharts / matplotlib） |
七、触发词
- 流程图 / 画流程图 / 生成流程图 / 做一张流程图
- 泳道图 / 跨职能流程图 / swim lane
- 系统架构图 / 架构图 / C4 图 / C4 上下文 / C4 容器
- draw.io 架构图 / 导出 draw.io / draw.io 源文件
- C4-PlantUML / C4 图 PlantUML 格式
- 时序图 / 序列图 / sequence diagram
- 状态图 / 状态机 / state diagram
- ER 图 / 实体关系图
- 甘特图 / gantt
- Mermaid / PlantUML
- 架构分层 / Tier 分层 / 多层架构图
八、版本历史
技术支持： 青岛火一五信息科技有限公司
