OpenFlowKit Diagram Studio

Draw architecture diagrams on a canvas or write them as code, then import Mermaid or map a GitHub repo.

OpenFlowKit Diagram Studio — draw diagrams on a canvas, write them as code, import Mermaid or map any public GitHub repo

How to use OpenFlowKit Diagram Studio

  1. Pick one of the 12 starter templates, or start from a blank canvas.
  2. Edit the code on the Code tab — the canvas re-renders instantly.
  3. Click any node to change its label, shape, colour or tech tag.
  4. Paste Mermaid on the Import tab to convert it to OFK code.
  5. Paste owner/repo on the Repo tab to map a public GitHub repo.

Features

  • 12 real starter templates: C4 shop architecture, three-tier AWS, RAG chatbot, Kubernetes, CI/CD and more
  • Two-way binding: the canvas and the OFK text are the same diagram
  • 16 shape words and 9 colours from the OFK grammar, with live diagnostics
  • Mermaid import: flowcharts convert with shapes mapped across
  • GitHub repo mapper: folders become groups, files become nodes, no token needed
  • Rule-based AI edits: colour databases, insert a cache, rename a service

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.