如何在drawio中绘制虚线框？

Question

**如何在draw.io中绘制虚线框？** 在draw.io（现称diagrams.net）中绘制虚线框是创建流程图、架构图等图形时的常见需求。用户通常希望用虚线框来表示虚拟边界、临时结构或特殊分组。然而，许多用户在初次使用时并不清楚如何快速实现这一效果。本文将介绍几种在draw.io中绘制虚线框的方法，包括使用内置形状、修改边框样式以及通过自定义样式实现更灵活的虚线效果。同时，还会解答一些常见问题，如虚线框无法显示、样式无法保存等，帮助用户高效掌握这一实用技巧。

Answer 1

如何在 draw.io（diagrams.net）中绘制虚线框？

在 IT 架构图、流程图、系统设计图中，虚线框常用于表示虚拟边界、临时结构、逻辑分组等。draw.io（diagrams.net）作为一款功能强大的图表绘制工具，提供了多种方式实现虚线框效果。本文将从基础操作到高级自定义样式，循序渐进地讲解如何在 draw.io 中绘制虚线框。

1. 使用内置形状创建虚线框

draw.io 提供了一些默认带有虚线边框的形状，适用于快速绘制逻辑边界或分组框。

1. 打开 draw.io（或 diagrams.net）；
2. 在左侧形状库中选择 General 类别；
3. 拖动 Dashed Rectangle 或 Container 到画布；
4. 调整大小以适应所需内容。

形状名称	描述	是否默认虚线
Dashed Rectangle	默认虚线矩形框，适合快速使用	是
Container	可容纳其他图形的容器，边框可设置为虚线	否（需手动设置）

2. 手动设置边框样式为虚线

如果使用的是普通矩形或自定义形状，可以通过修改边框样式实现虚线效果。

1. 绘制一个矩形（如 Basic 类别中的 Rectangle）；
2. 选中该图形，在右侧格式面板中找到 Stroke 设置；
3. 在 Stroke style 中选择 Dashed；
4. 可进一步调整虚线的间隔（Dash pattern）。

mxConstants.DASHED = true;
mxConstants.DASH_PATTERN = '3 3'; // 虚线间隔设置为 3px 实线 + 3px 空白

  

示例：通过脚本设置全局虚线样式（适用于开发者模式）

3. 自定义样式创建虚线框

对于需要复用的虚线样式，可以通过自定义样式实现快速应用。

1. 点击菜单栏 Arrange > Insert > Custom Style；
2. 输入以下样式代码：

strokeColor=#000000;
strokeWidth=1;
dashed=1;
dashPattern=4 4;

1. 点击 Apply，将该样式保存为模板；
2. 后续可直接从样式库中调用该虚线样式。

4. 常见问题与解决方法

在使用虚线框过程中，用户可能会遇到一些问题，以下是一些常见问题及其解决方法。

• 虚线框不显示：检查是否启用了 Dashed 选项，或尝试调整 Dash pattern 值；
• 样式无法保存：确保在自定义样式时正确命名并点击 Save；
• 虚线太密或太稀疏：调整 Dash pattern 数值，如 6 6 表示每段 6px 实线 + 6px 空白。

5. 使用 Mermaid 流程图示例说明虚线框应用场景

```mermaid
graph TD
    A[开始] --> B[系统A]
    B --> C[虚线框逻辑区域]
    C --> D[服务1]
    C --> E[服务2]
    style C fill:#fff,stroke-dasharray: 5 5,stroke:#333
```

  

示例：在 Mermaid 中使用虚线框表示逻辑区域

虽然 Mermaid 与 draw.io 是两个独立工具，但它们在表达逻辑结构时有相似之处。了解虚线框在不同工具中的使用方式，有助于提高整体架构图的设计效率。