Confluence Integration

DrawMotive integrates with Confluence Cloud as a macro, letting you create and edit diagrams directly within Confluence pages.

Overview

The Confluence integration uses a three-layer architecture optimized for performance:

1. Viewer — A lightweight component that displays a PNG preview of your diagram on the Confluence page. It loads quickly because it doesn't need the full editor.
2. React Shell — A thin wrapper that manages communication between Confluence and the editor. It handles loading diagram data, saving changes, and managing the edit modal.
3. DrawMotive Editor — The full drawing canvas, identical to the standalone web app. It loads only when you click "Edit."

This means viewing a diagram on a Confluence page is fast (just loading a PNG image), while editing gives you the complete DrawMotive experience.

Installation

1. Navigate to the Atlassian Marketplace and search for "DrawMotive"
2. Click Install and authorize the app for your Confluence site
3. The DrawMotive macro becomes available in the Confluence editor

Creating a Diagram

1. Open a Confluence page in edit mode
2. Type /drawmotive or use the macro browser to insert a DrawMotive macro
3. The macro opens the DrawMotive editor in a modal window
4. Create your diagram using all the standard drawing tools
5. Click Save to save the diagram and close the modal
6. The diagram appears as a PNG image on the Confluence page
7. Publish the Confluence page as usual

Editing a Diagram

1. View the Confluence page containing the diagram
2. Click the diagram to select the macro, then click the pencil icon that appears
3. The DrawMotive editor opens in a modal with your existing diagram loaded
4. Make your changes
5. Click Save — the PNG preview updates and Confluence shows the new version

This follows the standard Confluence macro editing pattern, so it feels native to the Confluence experience.

How Data is Stored

Diagram data is stored using the Forge Storage API:

Key	Contents
diagram.metadata	Title, creation date, and dimensions
diagram.png	PNG image preview (base64 encoded)
diagram.objects	Serialized drawing objects

All data stays within the Forge platform and your Confluence instance. Diagrams are scoped to the macro instance — each macro on each page has its own independent storage.

Technical Details

• Platform: Built with Atlassian Forge using UI Kit 2 for the viewer and Custom UI for the editor
• Viewer bundle: Approximately 50KB — minimal impact on page load times
• Editor: Full Blazor WebAssembly editor, loaded on demand
• Storage limits: Forge storage has per-key size limits; large diagrams are split across multiple keys
• Collaboration: The Confluence integration uses local CRDT editing within the modal (not server-synced real-time collaboration across multiple Confluence users)

Limitations

• The editor opens in a modal, not inline on the page
• Real-time multi-user editing within the Confluence macro is not currently supported (each user edits independently)
• PNG export is limited to 2MB for Forge storage compatibility
• The Blazor editor requires a WebAssembly-capable browser (all modern browsers support this)