Huo15 Flow Chart

火一五流程图技能 v1.3.3

2026 现代美学的流程图 / 架构图 / 泳道图 / C4 架构图 / 时序图生成器 — 青岛火一五信息科技有限公司

设计取向：Linear / Vercel / Radix / Stripe 软色系 + 双层柔和阴影 + 圆角节点 + 判断菱形 accent 强调色 + PDF 单页自适应。

---

一、核心能力

1.1 支持的图表类型

1.2 输出格式

--scale N（v1.3.3）：高清倍率，作用于 PNG。默认 3.0（≈288 DPI 印刷级）。

• 1.0 普通屏（96 DPI，文件最小）
• 2.0 视网膜屏（192 DPI）
• 3.0 印刷级 / 默认
• 4.0 高印刷（≈384 DPI，文件大约 1.5MB+）

底层映射：mmdc 走 -s SCALE，PlantUML 走 -Sdpi=N，rsvg-convert 走 -z N，Graphviz 走 -Gdpi=N。

1.3 十七种风格（v1.4 扩充到 17 种）

设计共性（所有风格统一遵循）：

• 节点：浅色填充 + 彩色描边 + 深色文字，12px 圆角，1.5px 描边
• 阴影：双层 drop-shadow（近 1/2px + 远 4/12px），模拟 Linear/Vercel 的浮起质感
• 判断菱形：统一用 accent_color 突出，区别于普通节点
• 数据库圆柱：secondary_color 填充，区别于业务节点
• 终端节点（shape: stadium）：primary_border_color 实填 + 白字，像 START 按钮（v1.3.1）
• 分类着色（category: 1..5）：按风格 palette 自动分 5 种色调（v1.3.1）
• 字体：Inter 优先 + PingFang SC/HarmonyOS Sans 回落，节点 font-weight: 500，标题 600
• 连线：basis 曲线（flowchart/C4）/ linear（泳道）/ 端点圆角
• 边标签：border-radius: 999px 圆角胶囊 + 微阴影（v1.3.1）
• 间距：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

# 风格色卡清单（终端 ANSI 预览）
python3 scripts/create-flow-chart.py --list-styles

# 风格画廊：一张图里 14 种风格对比
python3 scripts/create-flow-chart.py \
  -i examples/showcase.yaml --gallery \
  -o /tmp/gallery.png --gallery-cols 5

# 高清 PNG（4K 屏 / 印刷级，v1.3.3）
python3 scripts/create-flow-chart.py \
  -i examples/showcase.yaml \
  -o /tmp/print.png --style modern --scale 4

# 普通屏 PNG（更小文件）
python3 scripts/create-flow-chart.py \
  -i examples/flowchart.yaml \
  -o /tmp/preview.png --scale 1

# 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（双向）

语义边（v1.3.2）：semantic: success / warning / error / info / neutral 自动染色。暗色风格下会亮化：

edges:
  - { from: check, to: pay,  semantic: success, label: "通过 ✓" }
  - { from: check, to: back, semantic: error,   label: "失败 ✗" }
  - { from: build, to: deploy, semantic: warning, kind: dashed }
  - { from: audit, to: report, semantic: info }

节点 emoji 图标（v1.3.2）：label 里用 :name: 语法自动替换：

nodes:
  - { id: login, label: ":key: 登录" }         # 🔑 登录
  - { id: db,    label: ":db: 订单库", shape: cylinder }  # 💾 订单库
  - { id: ship,  label: ":ship: 发货" }        # 🚚 发货

已内置图标：user/login/lock/db/cache/cloud/api/mail/cart/pay/order/ship/deploy/rocket/bug/gear/shield/alarm 等 70+ 个，查完整列表见 flowchart_core.py 中的 _ICON_ALIASES。

节点分类（v1.3.1）：category: 1..5（或 c1..c5）自动分色，按当前风格的 palette 配色。

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 / dependency
• journey — 用户旅程，用 sections[].tasks[]
• pie — 饼图，用 items 数组

---

四、命令行参数

---

五、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')

主要接口：

---

六、与其他技能的边界

---

七、触发词

• 流程图 / 画流程图 / 生成流程图 / 做一张流程图
• 泳道图 / 跨职能流程图 / swim lane
• 系统架构图 / 架构图 / C4 图 / C4 上下文 / C4 容器
• draw.io 架构图 / 导出 draw.io / draw.io 源文件
• C4-PlantUML / C4 图 PlantUML 格式
• 时序图 / 序列图 / sequence diagram
• 状态图 / 状态机 / state diagram
• ER 图 / 实体关系图
• 甘特图 / gantt
• Mermaid / PlantUML
• 架构分层 / Tier 分层 / 多层架构图

---

八、版本历史

• v1.4.0（当前 · 2026-04-28） — 三个有性格风格扩展

  • ✅ 新增 editorial 编辑杂志风：米色卡底 #F5EFE0 + 衬线字（Cheltenham/NYT Imperial/Plantin）+ 报头朱红 #D0021B 描边 + 番茄红 #FF6347 accent + 2px 接近直角的圆角（杂志感）— 用于 NYT/Monocle 风信息图、长篇报道、编辑型品牌、思想类 SaaS。中文别名：编辑、杂志、纽约客、纽约时报、nyt、monocle、editorial、report
  • ✅ 新增 bauhaus 包豪斯风：红 #D32F2F + 黄 #FFD600 + 蓝 #1565C0 三原色硬填 + 1.8pt 黑描边 + 0 圆角 + Futura/Avenir Next 字体栈 + bold 模式 category — 用于文化机构、艺术展、几何品牌、教育、设计运动主题。中文别名：包豪斯、三原色、几何、bauhaus、primary-colors
  • ✅ 新增 swiss 瑞士国际主义风：纯白底 + Helvetica/Akzidenz-Grotesk + 1px 黑描边 + 报头红 #D4181F accent + 0 圆角 + 极简网格化 — 用于网格化信息图、政府公共项目、博物馆展览图、Müller-Brockmann 风学术。中文别名：瑞士、国际主义、swiss、helvetica、grid、müller、brockmann
  • ✅ 三个新风格与软色范式 14 风格反差互补，专攻"有性格 / 设计师作品级"场景；和 design-director v3.0 §二 视觉三元组的 §2.1 #3 Swiss Design / §2.5 #19 Bauhaus / §2.2 #6 NYT 锚点 1:1 对应
  • ✅ 总风格数 14 → 17，--list-styles / --gallery / 中英文别名 / 多端导出全套支持

• v1.3.3 — 高清渲染 默认 3× 印刷级

  • ✅ PNG 默认 3× 高清（≈288 DPI），告别朴素低分辨率，PPT / 印刷直接可用
  • ✅ --scale 新参数：1/2/3/4 自由切换，矢量格式（SVG/PDF）不受影响
  • ✅ 三引擎统一：mmdc -s、PlantUML -Sdpi、rsvg-convert -z、Graphviz -Gdpi 同一抽象
  • ✅ gallery 子图同步升级为 2.5× 渲染，PIL LANCZOS 缩放后细节锐利
  • ✅ PDF 矢量字体通过 rsvg-convert -z 进一步细化（PlantUML 路径）
  • ✅ 实测：1500×5400px / 240KB（3×），4K 屏放大无锯齿

• v1.3.2 — 预设风格 + 语义边 + emoji 图标

  • ✅ 新增 4 种风格：corporate 企业蓝金、ink 水墨朱砂、neubrutalism 新粗野主义、duotone 双色调（共 14 种）
  • ✅ 语义边：semantic: success/warning/error/info/neutral 自动染色（绿/橙/红/蓝/灰）
    • 支持 kind: success 简写
    • 走 Mermaid linkStyle N stroke:...,color:... 指令
    • 暗色风格下自动切换为亮色系语义色
  • ✅ 节点 emoji 前缀：label 里写 :rocket: 部署 / :db: 数据库 自动替换为 emoji，覆盖 70+ 流程图常用图标
  • ✅ category_mode 双模式：
    • soft（默认）→ Linear/Vercel 软色填充
    • bold → Neubrutalism 硬色填充
  • ✅ 中文别名大扩展：企业、金融、水墨、朱砂、中国风、宣纸、粗野、brutalism、双色、stripe 等

• v1.3.1 — 自我迭代 · 终端/分类/画廊

  • ✅ 终端节点自动高亮：stadium 形（开始/结束）自动挂 classDef terminal，主色实填 + 白字，像 START 按钮
  • ✅ 五色分类支持：Node 新增 category: 1..5 字段，自动生成 classDef c1..c5，按风格 palette 配色，一张图里视觉分层更清
  • ✅ 边标签 pill 化：边上文字用 border-radius: 999px 圆角胶囊 + 微阴影，替代朴素背景块
  • ✅ 箭头 / 连线圆润：stroke-linecap: round、stroke-linejoin: round，marker overflow 放大
  • ✅ Subgraph 标题强化：字重 700、accent 色、字距 .3px，让分组更像 Linear 的卡片
  • ✅ --gallery 模式：同一张规格一键渲染全部 10 种风格并拼成对比大图（scripts/gallery.py）
  • ✅ --list-styles 终端色卡：Truecolor ANSI 直接在终端显示每套风格的主色 / 描边 / 文字 / palette
  • ✅ 新增 examples/showcase.yaml：电商订单履约全链路样例，演示终端 + 判定 + 数据库 + 分类 + 分组的组合美学
  • ✅ 文档 --help 扩充：新增 --gallery / --gallery-styles / --gallery-cols / --list-styles 四个开关

• v1.3.0 — 2026 现代美学大改造

  • ✅ 十种风格全面重绘：从"深色填充 + 白字"老旧扁平风，升级为 Linear/Vercel/Radix 范式的"浅色填充 + 彩色描边 + 深色文字"
  • ✅ 双层 drop-shadow：drop-shadow(0 1px 2px) drop-shadow(0 4px 12px)，复刻 Linear/Vercel 的浮起质感
  • ✅ 判断菱形 accent 强调：自动 classDef decision，每套风格独立 accent 色
  • ✅ 数据库圆柱自动识别：自动 classDef database，用次级色区别于业务节点
  • ✅ Mermaid init 优化：nodeSpacing: 60 / rankSpacing: 80 / padding: 20，按图类自动切换曲线（flowchart basis、swimlane linear）
  • ✅ PDF 自适应画布（默认开启）：Mermaid 走 mmdc --pdfFit，PlantUML 走 SVG → rsvg-convert → PDF，单页不分页
  • ✅ draw.io 生成器重写：修复 XML 属性重复 bug、edge 源/目标 id 计算错乱；新增渐变、圆角、正交弧线、容器嵌套
  • ✅ PlantUML skinparam 扩充：圆角 + 阴影 + 时序参与者 + 分组 + dpi:120
  • ✅ 新 Style 字段：accent_text_color、accent_border_color、双层阴影参数、corner_radius、stroke_width、node_spacing、rank_spacing、padding、palette
  • ✅ 别名扩展：linear / vercel / notion / linear-dark 等

• v1.2.0 — draw.io 导出 + C4-PlantUML + Tier 分层

  • ✅ 新增 .drawio 源文件导出（draw.io 桌面版打开，精美编辑）
  • ✅ 新增 --theme / --font / --shadow 参数（draw.io 精美效果）
  • ✅ 新增 --export-formats（一键导出多种格式，兼容旧名 --also）
  • ✅ 新增 C4-PlantUML 引擎（--engine plantuml 输出专业 C4 图）
  • ✅ 新增 tiers 分层字段（architecture 类型专用，层次更清晰）
  • ✅ 新增 node.tier 属性（替代 group 归类，tiers 模式下使用）
  • ✅ to_drawio() Python API（可直接集成到其他工具）
  • ✅ 修复 .drawio 导出时 return 缺失 bug

• v1.1.0 — 扩展 6 种风格

  • 新增：ocean / forest / sunset / minimal / pastel / github

• v1.0.0 — 首版

  • 支持 13 种图表（flowchart / architecture / swimlane / swimlane_mermaid / sequence / state / gantt / er / class / journey / pie / c4_context / c4_container）
  • 3 种输入（YAML/JSON、Mermaid、PlantUML）、6 种输出（svg/png/pdf/mmd/puml/dot）
  • 4 种风格：modern / classic / dark / xiaohongshu

---

技术支持： 青岛火一五信息科技有限公司