2026 现代美学的流程图 / 架构图 / 泳道图 / C4 架构图 / 时序图生成器 — 青岛火一五信息科技有限公司
设计取向:Linear / Vercel / Radix / Stripe 软色系 + 双层柔和阴影 + 圆角节点 + 判断菱形 accent 强调色 + PDF 单页自适应。
type用途渲染引擎draw.ioflowchart普通流程图Mermaid✅architecture系统架构图(支持 Tier 分层)Mermaid✅swimlane真·泳道图(PlantUML)PlantUML❌swimlane_mermaid泳道风格(Mermaid,不需要 Java)Mermaid✅sequence时序图Mermaid/PlantUML✅state状态图Mermaid✅gantt甘特图Mermaid✅erER 图Mermaid✅classUML 类图Mermaid✅journey用户旅程Mermaid✅pie饼图Mermaid✅c4_contextC4 上下文图(L1)Mermaid / PlantUML✅c4_containerC4 容器图(L2)Mermaid / PlantUML✅mindmap简单思维导图Mermaid✅
格式类型说明.svg矢量图浏览器直接打开,最推荐(任意缩放不糊).png位图默认 3× 高清(≈288 DPI 印刷级),适合 PPT / 文档.pdf矢量 PDF适合打印; 默认单页自适应不分页.mmdMermaid 源码复制到 mermaid.live 编辑.pumlPlantUML 源码复制到 PlantUML 编辑器.drawiodraw.io 源文件用 draw.io 桌面版打开,精美编辑.dotGraphviz DOT 源码复杂网络拓扑
--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。
key名称设计范式适用场景中文别名modern现代商务Radix Indigo/Slate,浅底 + 靛紫描边 + 琥珀判断默认首选,商务/技术文档现代、商务、linear、vercelclassic经典稳重淡蓝卡 + 深蓝字 + 琥珀强调咨询报告、正式汇报经典、稳重dark暗色霓虹Linear Dark,深底 + 紫霓虹描边 + 青色 accent演示大屏、技术分享暗色、黑色、霓虹、linear-darkxiaohongshu小红书暖奶油奶油底 + 粉卡节点 + 玫红描边种草封面、女性向运营小红书、奶油、xhsocean海洋蓝浅天蓝节点 + 深蓝字 + 橙色 accentSaaS 产品、技术架构海洋、蓝、蓝色forest森林绿浅绿卡 + 墨绿字 + 橙色 accent环保、农业、健康森林、绿、自然sunset夕阳暖橙浅橙卡 + 赭红字 + 青色 accent运营活动、温暖叙事夕阳、暖橙、橙minimal极简素雅Notion 风,近白底 + 深灰字 + 单蓝 accent + 细描边学术论文、出版物、技术书稿极简、素雅、学术、论文、黑白、notionpastel马卡龙粉嫩浅紫底 + 深紫字 + 玫粉 accent儿童教育、女性向马卡龙、粉嫩、粉、儿童github极客 GitHub浅蓝卡 + 品牌蓝 + 绿色 accent开源 README、技术文档极客、程序员、ghcorporate企业蓝金深海蓝 + 暖金 accent,小圆角高正式感金融/政府/年报/提案企业、蓝金、金融、政府ink水墨朱砂米黄宣纸底 + 墨黑节点 + 朱砂 accent中国风/国学/文化/出版水墨、朱砂、中国风、宣纸neubrutalism新粗野主义亮色硬填 + 2.8px 黑描边 + 4px 硬阴影 + 0 圆角潮流独立站、设计作品集粗野、新粗野、brutalism、潮流duotone双色调纯白 + 深海蓝 + 珊瑚粉两色极简(Stripe 风)品牌官网、技术 blog双色、stripe、珊瑚editorial ⭐v1.4编辑杂志 NYT 风米色卡底 + 衬线字 + 报头朱红描边 + 番茄红 accent + 2px 圆角NYT/Monocle 杂志风信息图、长篇报道、编辑型品牌、思想类 SaaS编辑、杂志、纽约客、纽约时报、nyt、monocle、editorialbauhaus ⭐v1.4包豪斯红 #D32F2F + 黄 #FFD600 + 蓝 #1565C0 三原色硬填 + 1.8pt 黑描边 + 0 圆角 + Futura 风字体文化机构、艺术展、几何品牌、教育、设计运动主题包豪斯、三原色、几何、bauhaus、primary-colorsswiss ⭐v1.4瑞士国际主义纯白底 + Helvetica + 1px 黑描边 + 报头红 accent + 0 圆角 + 网格化网格化信息图、政府公共项目、博物馆展览图、Müller-Brockmann 风学术瑞士、国际主义、swiss、helvetica、grid、müller、brockmann
设计共性(所有风格统一遵循):
accent_color 突出,区别于普通节点secondary_color 填充,区别于业务节点primary_border_color 实填 + 白字,像 START 按钮(v1.3.1)category: 1..5):按风格 palette 自动分 5 种色调(v1.3.1)font-weight: 500,标题 600basis 曲线(flowchart/C4)/ linear(泳道)/ 端点圆角border-radius: 999px 圆角胶囊 + 微阴影(v1.3.1)nodeSpacing: 60、 rankSpacing: 80、 padding: 20(更透气).drawio 源文件,用 draw.io 桌面版打开--theme / --font / --shadow 参数生成精美效果bash
# 方案 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
bash
# 从 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
flowchart#yaml
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 自动染色。暗色风格下会亮化:
yaml
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: 语法自动替换:
yaml
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 配色。
architecture(支持 Tier 分层)#方式一:groups 分组
yaml
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 分层(推荐,层次更清晰)
yaml
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]
swimlane(真·PlantUML)#yaml
type: swimlane
title: 采购审批流程
lanes:
- name: 申请人
steps:
- { id: A1, label: 填写采购申请 }
- { id: A2, label: 提交审批 }
- name: 部门经理
steps:
- { id: B1, label: 初审 }
edges:
- [A1, A2]
- [A2, B1]
sequence#yaml
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: "首次登录自动建账" }
state#yaml
type: state
title: 订单状态机
direction: LR
nodes:
- { id: Pending, label: 待付款 }
- { id: Paid, label: 已付款 }
edges:
- { from: "[*]", to: Pending, label: 下单 }
- { from: Pending, to: Paid, label: 付款 }
gantt#yaml
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(里程碑)/ 留空即未开始。
c4_context / c4_container#Mermaid 引擎(默认)
yaml
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,更专业)
bash
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。
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 / corporate / ink / neubrutalism / duotone / editorial / bauhaus / swiss--themedraw.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
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 → FlowChartto_mermaid(fc, init_directive, style=None)→ Mermaid 源码;传 style 启用自动 classDefto_plantuml(fc, skinparam)→ PlantUML/C4-PlantUML 源码to_dot(fc, style)→ Graphviz DOTto_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 行
需求用哪个技能自由层级的思维导图,要导出 XMindhuo15-mind-map流程图 / 架构图 / 泳道图 / 时序图 / C4 图huo15-flow-chart(本技能)精美架构图(渐变/投影/圆角),本地编辑huo15-flow-chart + draw.io 导出工程制图 / 原型图不在范围内,建议 draw.io / Figma数据仪表盘用图表库(Chart.js / ECharts / matplotlib)
editorial 编辑杂志风:米色卡底 #F5EFE0 + 衬线字(Cheltenham/NYT Imperial/Plantin)+ 报头朱红 #D0021B 描边 + 番茄红 #FF6347 accent + 2px 接近直角的圆角(杂志感)— 用于 NYT/Monocle 风信息图、长篇报道、编辑型品牌、思想类 SaaS。中文别名:编辑、杂志、纽约客、纽约时报、nyt、monocle、editorial、reportbauhaus 包豪斯风:红 #D32F2F + 黄 #FFD600 + 蓝 #1565C0 三原色硬填 + 1.8pt 黑描边 + 0 圆角 + Futura/Avenir Next 字体栈 + bold 模式 category — 用于文化机构、艺术展、几何品牌、教育、设计运动主题。中文别名:包豪斯、三原色、几何、bauhaus、primary-colorsswiss 瑞士国际主义风:纯白底 + Helvetica/Akzidenz-Grotesk + 1px 黑描边 + 报头红 #D4181F accent + 0 圆角 + 极简网格化 — 用于网格化信息图、政府公共项目、博物馆展览图、Müller-Brockmann 风学术。中文别名:瑞士、国际主义、swiss、helvetica、grid、müller、brockmann--list-styles / --gallery / 中英文别名 / 多端导出全套支持--scale 新参数:1/2/3/4 自由切换,矢量格式(SVG/PDF)不受影响-s、PlantUML -Sdpi、rsvg-convert -z、Graphviz -Gdpi 同一抽象-z 进一步细化(PlantUML 路径)✅ 新增 4 种风格: corporate 企业蓝金、 ink 水墨朱砂、 neubrutalism 新粗野主义、 duotone 双色调(共 14 种)
✅ 语义边: semantic: success/warning/error/info/neutral 自动染色(绿/橙/红/蓝/灰)
kind: success 简写linkStyle N stroke:...,color:... 指令✅ 节点 emoji 前缀:label 里写 :rocket: 部署 / :db: 数据库 自动替换为 emoji,覆盖 70+ 流程图常用图标
✅ category_mode 双模式:
soft(默认)→ Linear/Vercel 软色填充bold → Neubrutalism 硬色填充✅ 中文别名大扩展:企业、金融、水墨、朱砂、中国风、宣纸、粗野、brutalism、双色、stripe 等
classDef terminal,主色实填 + 白字,像 START 按钮category: 1..5 字段,自动生成 classDef c1..c5,按风格 palette 配色,一张图里视觉分层更清border-radius: 999px 圆角胶囊 + 微阴影,替代朴素背景块stroke-linecap: round、 stroke-linejoin: round,marker overflow 放大--gallery 模式:同一张规格一键渲染全部 10 种风格并拼成对比大图( scripts/gallery.py)--list-styles 终端色卡:Truecolor ANSI 直接在终端显示每套风格的主色 / 描边 / 文字 / paletteexamples/showcase.yaml:电商订单履约全链路样例,演示终端 + 判定 + 数据库 + 分类 + 分组的组合美学--help 扩充:新增 --gallery / --gallery-styles / --gallery-cols / --list-styles 四个开关drop-shadow(0 1px 2px) drop-shadow(0 4px 12px),复刻 Linear/Vercel 的浮起质感classDef decision,每套风格独立 accent 色classDef database,用次级色区别于业务节点nodeSpacing: 60 / rankSpacing: 80 / padding: 20,按图类自动切换曲线(flowchart basis、swimlane linear)mmdc --pdfFit,PlantUML 走 SVG → rsvg-convert → PDF,单页不分页accent_text_color、 accent_border_color、双层阴影参数、 corner_radius、 stroke_width、 node_spacing、 rank_spacing、 padding、 palette.drawio 源文件导出(draw.io 桌面版打开,精美编辑)--theme / --font / --shadow 参数(draw.io 精美效果)--export-formats(一键导出多种格式,兼容旧名 --also)--engine plantuml 输出专业 C4 图)tiers 分层字段(architecture 类型专用,层次更清晰)node.tier 属性(替代 group 归类,tiers 模式下使用)to_drawio() Python API(可直接集成到其他工具).drawio 导出时 return 缺失 bugocean / forest / sunset / minimal / pastel / github技术支持: 青岛火一五信息科技有限公司