Skip to main content

Diagramforce

Browser-based Salesforce architecture diagram editor. Create professional diagrams for your Salesforce org without leaving your browser - no account, no backend, no payment.

Salesforce projects involve complex architectures spanning multiple clouds, integrations, and data flows. Communicating these structures clearly to stakeholders, developers, and admins is essential - but general-purpose diagramming tools often lack Salesforce-specific context or include hefty licensing fees, and platform-native options can be limiting.

Diagramforce is a free, browser-based editor purpose-built for Salesforce diagrams covering all project needs. It ships with Salesforce icons, BPMN process shapes, data model objects, org charts, Gantt timelines, and UML sequence diagrams - all styled with the Salesforce Lightning Design System (SLDS) for a native look and feel.

Everything runs locally in your browser. No sign-up, no server, no data leaves your machine.

You Should Know

The app code is 100% AI generated as a part of my exploration of AI capabilities in software development. If you find any issues or have suggestions, please feel free to contribute on GitHub or let me know on LinkedIn.

Open App

Six Diagram Types in One Tool​

Instead of switching between different tools for different needs, Diagramforce offers six specialized diagram types - each with its own shape palette, stencil categories, and sensible defaults:

Architecture Diagrams​

The core diagram type. Drag and drop Salesforce cloud and product nodes (Sales Cloud, Service Cloud, Marketing Cloud, MuleSoft, Tableau, etc.), group them into containers and zones, and connect them with labelled links. Perfect for solution architecture overviews, integration landscapes, and technical design documents.

Process Diagrams (BPMN)​

Full BPMN 2.0 shape support - events, tasks, gateways, subprocesses, and pools - alongside flowchart shapes. Use these to map out automation flows, approval processes, or cross-system orchestrations.

Data Model Diagrams​

Purpose-built data objects with an inline field editor. Add fields with all details, mark them as keys, required or decomissioned, connect objects with ER notation (one-to-many, many-to-many, etc.), and visualize your Salesforce data model or Marketing Cloud data extensions at a glance. Includes pre-built templates for common Marketing Cloud data views.

Organisation Charts​

Map out your Salesforce team structure with person cards that include avatars, roles, and detail lines. Group people into teams (containers) and departments (zones) to visualize reporting lines and responsibilities across your org.

Gantt Charts​

Plan and communicate Salesforce project timelines with tasks, milestones, groups, and a timeline ruler. Useful for implementation roadmaps, release planning, and stakeholder updates.

Sequence Diagrams​

UML sequence diagrams with participants, actors, activation boxes, and alt/loop fragments - perfect for documenting integration flows, authentication handshakes, and asynchronous API conversations. Reply-direction messages default to dashed lines to match UML convention, self-messages are drawn on one side of the lifeline, and participant headers are mirrored at the foot of long lifelines so the reader never loses track of who is who.

Key Features​

  • Drag & Drop Stencil: Searchable shape palette with Salesforce-specific icons and templates - just drag onto the canvas.
  • Smart Connections: Custom connectors links offers flexible joins with automatic obstacle avoidance.
  • Multi-Select & Alignment: Cmd/Ctrl+click or Shift+drag to select multiple elements, then align, distribute, or resize them together.
  • Undo/Redo: Full command-pattern history with batching - undo even complex multi-step operations.
  • Multi-Tab Diagrams: Work on multiple diagrams simultaneously, each with its own type, canvas state, and undo history.
  • Auto-Layout: One-click force-directed layout that intelligently handles connected components and layering.
  • Dark & Light Themes: Toggle between themes - diagrams adapt automatically with SLDS-consistent styling.
  • Multiple Export Options: Save to browser storage, export as JSON for version control, or as PNG for presentations.
  • URL Sharing: Generate a shareable link that encodes your entire diagram in the URL and shares a copy - no server needed.
  • Mermaid Import (beta): Paste mermaid.js source - graph, flowchart, stateDiagram, erDiagram, or sequenceDiagram - and Diagramforce converts it into a native, fully-editable diagram with auto-layout applied.
  • LLM Spec: On GitHub you can also find a Diagram JSON specification that allows you to generate diagrams with AI or code - the possibilities are endless.

Built on Solid Foundations​

Diagramforce is built with JointJS v4 and styled with the Salesforce Lightning Design System (SLDS). The entire app is static HTML, CSS, and vanilla JavaScript served directly from GitHub Pages.

This architecture means the tool loads fast, runs anywhere, and can be forked or extended without any toolchain setup.

Open AppOpen GitHub