图表类型预设
当用户请求特定图表类型时,应用下方匹配的预设来确定形状、样式和布局约定。这些预设设置结构性样式关键字(如 ERD 的shape=table;childLayout=tableLayout);用户的样式预设(参见references/style-presets.md)在其上叠加颜色/字体/连线/附加属性。
在以下情况下阅读本文档:
- 用户指定了其中一种图表类型(ERD、UML 类图、序列图、架构图、ML/DL 模型图、流程图)
- 你正在为新图表选择形状词汇或布局方向
ERD(实体关系图)
| 元素 | 样式 | 说明 |
|---|---|---|
| 表 | shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;fixedRows=1;rowLines=0;fontStyle=1;strokeColor=#6c8ebf;fillColor=#dae8fc; | 每个表是一个容器 |
| 行(列) | shape=tableRow;horizontal=0;startSize=0;swimlaneHead=0;swimlaneBody=0;fillColor=none;collapsible=0;dropTarget=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;fontSize=12; | 表的子元素,parent=tableId |
| 主键列 | 粗体文本:该行的fontStyle=1 | 以PK前缀或键图标标记 |
| 外键关系 | 虚线连线:dashed=1;endArrow=ERmandOne;startArrow=ERmandOne; | 使用 ER 表示法箭头 |
| 布局 | TB(从上到下),表格间距 300px | 相关表格纵向分组 |
UML 类图
| 元素 | 样式 | 说明 |
|---|---|---|
| 类框 | swimlane;fontStyle=1;align=center;startSize=26;html=1; | 3 个分区:标题 / 属性 / 方法 |
| 分隔线 | line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=10;rotatable=0;labelPosition=left;points=[];portConstraint=eastwest; | 位于分区之间 |
| 继承 | endArrow=block;endFill=0; | 空心三角箭头 |
| 实现 | endArrow=block;endFill=0;dashed=1; | 虚线 + 空心三角 |
| 组合 | endArrow=diamondThin;endFill=1; | 实心菱形 |
| 聚合 | endArrow=diamondThin;endFill=0; | 空心菱形 |
| 布局 | TB(从上到下),类间距 250px | 接口位于实现之上 |
序列图
| 元素 | 样式 | 说明 |
|---|---|---|
| 角色/对象 | shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest; | 带虚线垂直连线的生命线 |
| 同步消息 | html=1;verticalAlign=bottom;endArrow=block; | 实线,实心箭头 |
| 异步消息 | html=1;verticalAlign=bottom;endArrow=open;dashed=1; | 虚线,开放箭头 |
| 返回消息 | html=1;verticalAlign=bottom;endArrow=open;dashed=1;strokeColor=#999999; | 灰色虚线 |
| 激活框 | 生命线上的shape=umlFrame;whiteSpace=wrap; | 生命线上的窄矩形 |
| 布局 | LR(从左到右),生命线间距 200px | 时间从上到下流动 |
架构图
| 元素 | 样式 | 说明 |
|---|---|---|
| 层/层级 | swimlane;startSize=30; | 用于分组的容器:客户端 / API / 服务 / 数据 |
| 服务 | rounded=1;whiteSpace=wrap;html=1;+ 层级颜色 | 按层级使用颜色调色板 |
| 数据库 | shape=cylinder3;whiteSpace=wrap;html=1; | 绿色调色板 |
| 队列/总线 | rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656; | 黄色——居中放置作为枢纽模式 |
| 网关/负载均衡 | shape=mxgraph.aws4.resourceIcon;或带橙色的rounded=1; | 橙色调色板 |
| 外部系统 | rounded=1;dashed=1;fillColor=#f5f5f5;strokeColor=#666666; | 外部系统使用虚线边框 |
| 布局 | 按层级数选择 TB 或 LR;≥4 层 → TB | 枢纽节点居中 |
ML / 深度学习模型图
用于神经网络架构图——适用于向 NeurIPS、ICML、ICLR 等会议投稿的论文。
| 元素 | 样式 | 说明 |
|---|---|---|
| 层块 | rounded=1;whiteSpace=wrap;html=1;+ 类型颜色 | 主要构建块 |
| 输入/输出 | fillColor=#d5e8d4;strokeColor=#82b366; | 绿色 |
| 卷积/池化 | fillColor=#dae8fc;strokeColor=#6c8ebf; | 蓝色 |
| 注意力/Transformer | fillColor=#e1d5e7;strokeColor=#9673a6; | 紫色 |
| RNN / LSTM / GRU | fillColor=#fff2cc;strokeColor=#d6b656; | 黄色 |
| 全连接/线性层 | fillColor=#ffe6cc;strokeColor=#d79b00; | 橙色 |
| 损失/激活 | fillColor=#f8cecc;strokeColor=#b85450; | 红色/粉色 |
| 跳跃连接 | dashed=1;endArrow=block;curved=1; | 虚线曲线箭头 |
| 张量形状标签 | 添加形状注释作为次级标签:value="Conv2D
(B, 64, 32, 32)" | 使用
实现多行 |
| 布局 | TB(数据从上到下流动),层间距 150px | 将编码器/解码器分组为泳道 |
张量形状约定:以(B, C, H, W)或(B, T, D)格式为每层标注输入/输出张量维度。使用
将维度放在标签的第二行。
流程图(增强版)
| 元素 | 样式 | 说明 |
|---|---|---|
| 开始/结束 | ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366; | 绿色椭圆形 |
| 处理过程 | rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf; | 蓝色矩形 |
| 判断 | rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656; | 黄色菱形 |
| 输入/输出 | shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00; | 橙色平行四边形 |
| 子流程 | rounded=0;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;+ 双边框 | 紫色 |
| 是/否标签 | 判断连线上的value="Yes"/value="No" | 始终标记判断分支 |
| 布局 | TB(从上到下),纵向间距 200px | 判断分支左右展开,合并回中央 |