问题：如何在draw.io中添加自定义形状？

Question

**如何在draw.io中添加自定义形状？** 在使用 draw.io（现称 diagrams.net）进行图表绘制时，用户常常希望添加自定义形状以满足特定的绘图需求。那么，如何在 draw.io 中添加自定义形状呢？常见的方法包括使用内置的“自定义形状”功能、导入 SVG 图形、或通过“形状库”进行扩展。用户可以通过“编辑”菜单中的“创建 Custom Shape”选项，定义新的形状并保存为模板，也可以将外部设计好的 SVG 文件导入到绘图中作为自定义形状使用。此外，还可以将常用的自定义形状保存为“自定义库”，以便在多个项目中重复使用。掌握这些技巧，有助于提升 draw.io 的灵活性和绘图效率。

Answer 1

如何在 draw.io（diagrams.net）中添加自定义形状？

draw.io（现称 diagrams.net）是一款功能强大且开源的图表绘制工具，广泛应用于IT架构图、流程图、网络拓扑图等多种场景。在实际使用中，用户经常需要添加一些不在默认形状库中的图形元素，以满足特定的绘图需求。本文将从基础操作到高级技巧，系统地介绍如何在 draw.io 中添加自定义形状。

一、使用内置“自定义形状”功能

draw.io 提供了创建自定义形状的功能，允许用户通过代码方式定义形状样式。

1. 打开 draw.io，在菜单栏点击 “编辑” → “创建自定义形状”（Edit → Create Custom Shape）。
2. 在弹出的窗口中，输入以下 XML 格式的形状定义代码：

<shape name="Custom Rectangle" h="100" w="100">
  <background>
    <rect x="0" y="0" width="w" height="h" fill="white" stroke="black"/>
  </background>
  <text x="w/2" y="h/2" align="center" valign="middle">Custom</text>
</shape>

该代码定义了一个带文字的矩形形状。

二、导入 SVG 图形作为自定义形状

SVG（可缩放矢量图形）是网页中广泛使用的图形格式，draw.io 支持将 SVG 文件导入为自定义形状。

1. 准备一个 SVG 文件（可以从网上下载或使用如 Inkscape 等工具创建）。
2. 在 draw.io 中，点击左侧工具栏的 “更多形状”（More Shapes）。
3. 在弹出的窗口中，选择 “自定义”（Custom）选项卡。
4. 点击 “导入 SVG”（Import SVG）按钮，上传你的 SVG 文件。
5. 导入后即可将该图形拖入画布使用，并可调整大小和样式。

三、保存为“自定义库”以便复用

为了在多个项目中重复使用自定义形状，可以将其保存为“自定义库”。

1. 完成自定义形状的创建或导入后，右键点击该图形，选择 “保存为形状”（Save as Shape）。
2. 选择保存位置为“自定义”库。
3. 在后续项目中，可通过 “更多形状” → “自定义” 调用该形状。

四、进阶技巧：使用 JavaScript 定义动态形状

对于高级用户，draw.io 支持通过 JavaScript 定义动态行为的自定义形状。

<shape name="Dynamic Circle" h="100" w="100">
  <background>
    <circle cx="w/2" cy="h/2" r="w/2" fill="blue"/>
  </background>
  <constraints>
    <constraint name="radius" value="w/2"/>
  </constraints>
</shape>

此代码定义了一个圆形，并通过约束设置其半径随宽度变化。

五、Mermaid 流程图示例：自定义形状添加流程

graph TD
    A[开始] --> B{选择方式}
    B -->|创建形状| C[编辑 → 创建自定义形状]
    B -->|导入SVG| D[更多形状 → 自定义 → 导入SVG]
    B -->|保存库| E[右键图形 → 保存为形状]
    C --> F[输入XML代码]
    D --> G[上传SVG文件]
    E --> H[在自定义库中使用]

六、总结与扩展

通过上述方法，用户可以在 draw.io 中灵活地添加各类自定义形状，满足从简单图形到复杂图标的需求。结合 SVG、XML 和 JavaScript 的能力，可以构建出高度定制化的图形库，提升绘图效率和专业性。