图表类型预设

当用户请求特定图表类型时,应用下方匹配的预设来确定形状、样式和布局约定。这些预设设置结构性样式关键字(如 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 判断分支左右展开,合并回中央
Logo

中国智能体开发者社区,聚焦智能体与大模型开发,提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动,促进经验交流与协作,助力开发者快速构建创新智能应用。

更多推荐