Diagram Designer

Visual design canvas for project architecture, flowcharts, and technical diagrams — integrated with your projects.

Overview

Diagram Designer is the visual canvas inside the Project Management module. It provides a full node-and-edge drawing surface for creating architecture diagrams, flowcharts, swimlane diagrams, and any other visual that belongs to a project. Unlike the standalone Workflow Editor (which is developer-focused), Diagram Designer is project-scoped — diagrams are saved directly to the active project.

Accessed via project-design view

Diagram Designer is the project-design sub-view of the ProjectManagement screen. It shares the same canvas engine as the Workflow Editor but presents a project-management-oriented node palette and saves diagrams as project artifacts.

Key Features

Node Palette

A curated set of nodes for PM use: milestones, deliverables, decision gates, swim lanes, actors, and free-form shapes.

Project-Scoped Saving

Each diagram is saved as an artifact of the currently selected project. Switch projects to see each project's own set of diagrams.

Auto-Layout

Apply automatic layout algorithms (top-down, left-right, radial) to instantly organise a cluttered diagram with one click.

Annotations & Labels

Add sticky-note annotations anywhere on the canvas to capture decisions, assumptions, or open questions without cluttering node labels.

Export

Export the diagram as PNG, SVG, or JSON. JSON can be re-imported to continue editing on any device.

Mini-Map

A mini-map in the bottom-right corner lets you quickly navigate large diagrams and see the full picture at a glance.

Quick Start

Open Project Management and select a project from the left sidebar.
Click the Design tab in the top tab bar to open Diagram Designer.
Drag nodes from the palette on the left onto the canvas.
Connect nodes by hovering a node's edge handle and dragging to another node.
Click Save to persist the diagram to the active project.

Tip — Keyboard shortcuts

Use Ctrl+Z / Ctrl+Y for undo/redo. Ctrl+A selects all nodes. Delete removes selected elements. Space + drag pans the canvas.

Relationship to Workflow Editor

Both Diagram Designer and the Workflow Editor use the same underlying React Flow canvas. The key differences are:

Diagram Designer — scoped to a PM project; node palette focuses on project artifacts; diagrams saved as project data.
Workflow Editor — standalone; node palette covers automation, AI, data, and developer categories; workflows executed by the workflow engine.

Diagrams created in Diagram Designer also appear in My Diagrams in Workspace mode.

FAQ

Can I share a diagram with my team?

Diagrams saved to a project are visible to all project members when they open the same project's Design tab. Export as PNG or SVG to share outside TotalApp.

Is there a limit on the number of nodes?

There is no hard node limit. Very large diagrams (500+ nodes) may experience reduced performance. For large architecture diagrams, consider splitting into multiple linked diagrams.