OpenFlowKit Documentation

Studio is the right-side workspace in OpenFlowKit designed for structured workflows that go beyond simple drag-and-drop visual editing. It is used for AI-assisted generation, code-backed editing (OpenFlow DSL and Mermaid), structured imports (Infrastructure Sync), and rule-driven architecture validation (Linting).

Use the Canvas for spatial editing and visual cleanup, and use the Properties Panel for exact tuning of elements. Use Studio when you need to move between visual editing and structured inputs like code, prompts, or infrastructure files.

OpenFlowKit is an open-source (MIT licensed) diagramming studio designed for builders. It allows users to create technical flows using templates, code (DSL), structured imports, or AI generation.

Key capabilities include:

• Visual Canvas Editor: A professional workspace for refining diagrams.
• Bidirectional Diagram-as-Code: Live synchronization between a visual canvas and a Git-friendly DSL.
• Automatic Icon Assignment: Automatically matches over 1,600 technology icons (AWS, Azure, GCP, CNCF, etc.) to nodes based on labels.
• AI Generation: Supports 10 different providers (including local Ollama) to generate diagrams from plain English prompts.
• Cinematic MP4 Export: Uses WebCodecs H.264 for faster-than-realtime walkthrough exports.
• MCP Server Support: Allows AI agents like Claude Desktop, Cursor, and Windsurf to drive the diagramming process directly.

OpenFlowKit is a local-first diagram editor built with React 19, TypeScript 5, React Flow/XYFlow, Zustand, and ELK.js. The repository is organized into three main runtime surfaces:

• Main App (src/): The browser-based editor and in-app experiences.
• Docs Site (docs-site/): Public documentation built with Astro/Starlight.
• Marketing Site (web/): The public landing page.

Internal repository notes and operational markdown are located in docs/.

Decide which workflow to use based on your starting point and requirements:

Choosing between Infrastructure Sync and AI Import depends on your source material and requirements for trust:

Use Infrastructure Sync when you want to ensure the diagram accurately reflects the underlying infrastructure source without reinterpretation.

OpenFlowKit provides specialized node families designed for specific diagramming semantics. Instead of choosing nodes based on visual shape, choose them based on the underlying data model and workflow requirements.

• Flow nodes: Best for generic procedural logic and standard flowcharts.
• Mind map nodes: Best for hierarchical ideation and branching structures where parent-child relationships and depth are important.
• Architecture and asset-backed nodes: Best for system topology and infrastructure modeling, utilizing provider-backed icons and visual boundaries.
• Journey and experience nodes: Best for mapping user or process stages, focusing on actors, stages, and scoring.
• Media and wireframe nodes: Best for UX, product, and annotated architecture workflows using images or browser/mobile wireframe styles.

Flow nodes are the default building blocks for most workflows. Use these when your diagram is primarily procedural and does not require the specialized metadata found in other families.

Available node types:

• start
• process
• decision
• end
• custom

- start
- process
- decision
- end
- custom

Decide between using room-based sharing or file exporting based on your workflow requirements:

Use Collaboration Sharing when:

• The diagram should remain interactive.
• Other people need to join the current working canvas.
• You require presence indicators and room-based workflows.

Use Exporting when:

• You need a static artifact rather than a live session.
• The destination is documentation, slides, or a design tool.
• You need a durable handoff file for someone who will not use the live room.

OpenFlowKit provides structured diagram types with opinionated defaults and correct relationship semantics rather than a freeform whiteboard. Supported families include:

• Flowcharts: Processes, decision trees, and system flows.
• Architecture: Built-in icons for AWS, Azure, GCP, and CNCF cloud providers.
• Entity-Relationship: Typed fields, FK edges, and one-to-many/many-to-many notation.
• Class diagrams: UML with inheritance, composition, and interface relationships.
• Sequence diagrams: Async messages, actors, and lifelines.
• Mind maps: Collapsible radial trees with auto-layout.
• User journeys: Steps, phases, and sentiment scoring.
• State machines: Transitions, guards, entry, and exit actions.