Draw.io Integration

The Draw.io integration embeds a full-featured diagram editor inside SetGet pages. Create flowcharts, system architecture diagrams, wireframes, ER diagrams, sequence diagrams, and more without switching to a separate application. Diagrams are stored as part of the page content, keeping documentation and visuals together.

Capabilities

Feature	Description
Inline diagram editor	Full Draw.io editor embedded within the page editor
Diagram types	Flowcharts, architecture diagrams, wireframes, ER diagrams, UML, sequence diagrams, mind maps
Storage	Diagrams are stored alongside page content in SetGet
Export	Export diagrams as PNG, SVG, or PDF
Collaboration	Multiple team members can view and edit diagrams

No setup required

The Draw.io integration is built into SetGet pages. There is no separate connection or authorization step. Every workspace member with edit access to a page can create and edit diagrams.

Creating a diagram

Method 1 -- Slash command

1. Open or create a SetGet page.
2. In the page editor, type /draw or /diagram.
3. Select Draw.io Diagram from the slash command menu.
4. The Draw.io editor opens inline.
5. Build your diagram using the toolbar and shape libraries.
6. Click Save to embed the diagram in the page.

Method 2 -- Block menu

1. In the page editor, click the + button to open the block menu.
2. Search for "Diagram" or "Draw.io".
3. Click Draw.io Diagram.
4. The editor opens inline.

Editing an existing diagram

1. Click on the embedded diagram in the page.
2. Click the Edit button that appears above the diagram.
3. The Draw.io editor opens with the current diagram loaded.
4. Make your changes.
5. Click Save to update the diagram in the page.

Supported diagram types

Type	Use case	Example
Flowchart	Process workflows, decision trees	User registration flow
Architecture diagram	System components, service interactions	Microservices topology
Wireframe	UI mockups, page layouts	Dashboard layout sketch
ER diagram	Database schema, entity relationships	Data model documentation
UML class diagram	Object-oriented design	Service layer class hierarchy
Sequence diagram	Interaction timelines	API request-response flow
Mind map	Brainstorming, idea organization	Feature brainstorm
Network diagram	Infrastructure topology	Server and network layout
Org chart	Team structure	Department hierarchy

Editor features

The embedded Draw.io editor includes:

• Shape libraries -- hundreds of built-in shapes organized by category (General, UML, Network, AWS, Azure, GCP, etc.).
• Connectors -- straight, curved, and orthogonal connectors with customizable endpoints.
• Text formatting -- fonts, sizes, colors, alignment, and rich text in shapes.
• Layers -- organize complex diagrams into layers that can be shown or hidden.
• Grid and snap -- align shapes precisely with grid snapping.
• Zoom and pan -- navigate large diagrams with scroll and pinch gestures.
• Search shapes -- search across all shape libraries to find the component you need.
• Custom colors and styles -- match your team's brand or documentation style.

Diagram storage

Diagrams are stored as XML data embedded within the page document. This means:

• Diagrams are versioned with the page. Restoring a page version restores the diagram as it was at that point.
• Diagrams do not consume separate storage quota.
• Diagrams are included when exporting pages.

TIP

For large, complex diagrams, consider creating a dedicated page to keep load times fast and the diagram easy to find.

Exporting diagrams

To export a diagram as a standalone file:

1. Click on the diagram to select it.
2. Click the Edit button to open the Draw.io editor.
3. In the editor, go to File > Export.
4. Choose the format: PNG, SVG, or PDF.
5. Configure resolution and other options.
6. Click Export.

Exported files are downloaded to your local machine.

Best practices

• Name your diagrams -- add a title above or below the diagram block so team members can find it quickly.
• Use layers -- separate foreground elements from background context in complex diagrams.
• Keep diagrams focused -- one diagram per concept. Multiple small diagrams are easier to understand than one massive diagram.
• Use consistent styles -- agree on colors and shapes within your team for consistency across documentation.

WARNING

Very large diagrams (hundreds of shapes) may increase page load time. If a diagram becomes unwieldy, split it into multiple focused diagrams on separate pages.

Use cases

Scenario	Diagram type	How it helps
Sprint planning	Flowchart	Map out user flows before implementation
Architecture review	Architecture diagram	Document service boundaries and dependencies
Database design	ER diagram	Plan schema changes before writing migrations
Onboarding docs	Network diagram	Show infrastructure topology to new team members
Product brainstorm	Mind map	Organize ideas during discovery phase
API documentation	Sequence diagram	Illustrate request-response flows

Keyboard shortcuts

The Draw.io editor supports standard keyboard shortcuts:

Shortcut	Action
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Y	Redo
Ctrl/Cmd + C	Copy
Ctrl/Cmd + V	Paste
Ctrl/Cmd + A	Select all
Delete	Delete selected
Ctrl/Cmd + G	Group selected shapes
Ctrl/Cmd + Shift + U	Ungroup
+ / -	Zoom in / out
Ctrl/Cmd + Shift + F	Toggle fullscreen

Limitations

Limitation	Detail
Real-time co-editing	Only one user can edit a diagram at a time. Others see the saved version.
Offline editing	The Draw.io editor requires an internet connection to load.
Shape library imports	Custom shape libraries from external Draw.io instances are not supported.
Maximum size	Diagrams with more than 500 shapes may experience performance degradation.

Related pages

• Integrations overview
• Pages
• Collaboration