DOCSEARCHbyAlgolia
Submit Docs

DrawMotive Documentation

website·Indexed 31 days ago

https://docs.drawmotive.com

A collaborative diagramming tool for teams to create and edit diagrams in real-time. Features include conflict-free merging powered by CRDTs, geometric constraints, and integrations with Confluence, VS Code, and planned support for Google Docs, Notion, and Microsoft 365.

Tokens
8.6K
Snippets
8
Records
75
Agent score
49%

What's inside DrawMotive

  1. Overview of DrawMotive Documentation

    DrawMotive is a collaborative diagramming tool built for teams. The documentation provides the following resources to help users get started and master the tool:

    • Quick Start: Instructions for creating your first diagram.
    • User Guide: Detailed information on drawing tools, constraints, collaboration, and exporting.
    • Integration Guides: Setup instructions for platforms like Confluence and VS Code.
    • Tutorials: Step-by-step walkthroughs for common use cases, such as software architecture diagrams.
    • FAQ & Troubleshooting: Solutions to known issues and answers to common questions.

  2. Overview of DrawMotive collaborative diagramming

    DrawMotive is a collaborative diagramming tool designed for teams to create, edit, and share diagrams in real time. It is built as a Progressive Web App (PWA) using Blazor WebAssembly and SkiaSharp on HTML5 Canvas, ensuring the editor executes locally in the browser. The server functions as a sync relay rather than a hard dependency, allowing the tool to remain functional without a constant internet connection.

  3. Understand DrawMotive's core capabilities and browser support

    DrawMotive is a collaborative diagramming tool for software architecture diagrams, flowcharts, and wireframes. It is built with an offline-first architecture, allowing users to create and edit diagrams without an internet connection; changes sync automatically upon reconnection. It is compatible with any modern browser supporting WebAssembly (Chrome, Firefox, Edge, and Safari), though Chrome and Edge are recommended for optimal performance.

  4. Understand the DrawMotive four-layer rendering architecture

    The DrawMotive canvas separates concerns into four distinct rendering layers:

    1. Background: Handles grid lines, guides, and reference images.
    2. Graphics: Contains the primary drawing content (lines, rectangles, circles, text, and connectors).
    3. Transient: Manages temporary elements like selection rectangles and drawing previews.
    4. Grip: Provides interactive handles for rotating, resizing, and connecting shapes.

  5. DrawMotive Confluence integration technical specifications and limitations

    The integration uses a three-layer architecture: a lightweight Viewer (UI Kit 2, ~50KB), a React Shell for communication, and a full Blazor WebAssembly Editor loaded on demand.

    Key Limitations:

    • Editor opens in a modal, not inline.
    • No real-time multi-user collaboration within the macro (local CRDT editing only).
    • PNG exports are limited to 2MB for Forge storage compatibility.
    • Requires a WebAssembly-capable browser.

  6. Collaborate on diagrams in real-time

    DrawMotive supports simultaneous team collaboration on diagrams. It utilizes Conflict-free Replicated Data Types (CRDTs) to ensure that changes are seen instantly by all collaborators and merged without conflicts.

  7. Collaborate using CRDTs and Offline-First Sync

    DrawMotive uses Conflict-free Replicated Data Types (CRDTs) and an offline-first architecture to enable real-time collaboration:

    • Local-First Edits: Changes appear immediately on the local screen without waiting for a server round-trip.
    • Background Synchronization: Edits are packaged as transactions and synced via a server relay.
    • Conflict Resolution: Uses last-write-wins (LWW) with timestamps to ensure all users converge to the same state.
    • Causality Tracking: Vector clocks are used to apply changes in the correct order.
    • Offline Persistence: All edits are saved immediately to the browser's IndexedDB. A sync queue tracks pending changes and automatically drains them when a network connection is restored.

  8. Understand the DrawMotive Editor Interface

    The DrawMotive editor consists of four primary components:

    • Toolbar: Contains shape tools, selection tools, and drawing modes.
    • Canvas: An infinite, pannable drawing surface.
    • Properties panel: Used to edit attributes of selected shapes, such as color, stroke, and dimensions.
    • Grid: Background alignment lines that can be toggled on or off.

  9. Understand how DrawMotive constraints work

    Constraints in DrawMotive are geometric and dimensional relationships between shapes. The system uses a constraint solver based on the BFGS optimization algorithm, treating each constraint as an energy function. The solver minimizes total energy to satisfy all constraints simultaneously rather than sequentially. Because the solver runs locally, constraints function offline.

  10. Understand DrawMotive's real-time collaboration architecture

    DrawMotive uses a local-first editing approach where changes are applied immediately to the local copy without waiting for server confirmation. Changes are packaged into transactions and sent via a background sync queue to a server, which broadcasts them to other users. The system typically achieves a latency of 50–500ms. To maintain causal order of changes despite network delays, DrawMotive employs vector clocks; if a transaction arrives out of order, it is placed in a deferred queue until missing dependencies are fetched from the server.

  11. Create a software architecture diagram in DrawMotive

    To build a system architecture diagram (such as a three-tier architecture with frontend, backend, and database), follow these steps:

    1. Create Components: Use the Rectangle tool to draw boxes for each service (e.g., Web Frontend, API Server, Database).
    2. Add Labels: Use the Text tool to click inside a rectangle and type its name, or double-click a rectangle to add text directly.
    3. Connect Components: Use the Line tool. Hover over the edge of a rectangle until the connection point highlights, click to start the line, and click the target rectangle to complete the connection.
    4. Label Connections: Use the Text tool to add labels to connector lines to specify the protocol or technology (e.g., 'REST API', 'SQL', 'OAuth').
    5. Style and Export: Adjust colors to distinguish tiers and stroke widths for emphasis. Export the final result as PNG or SVG.

  12. Implement real-time collaboration and offline editing in DrawMotive

    DrawMotive utilizes Conflict-free Replicated Data Types (CRDTs) to enable simultaneous multi-user editing without a central coordinator. To ensure responsiveness and reliability, the tool employs an offline-first architecture: all editing operations are applied locally first and saved to the browser's IndexedDB storage, then synchronized in the background upon reconnection.