by openflowkit
Free, open-source diagram canvas. Draw it, write it as code (Mermaid, D2, Structurizr in), ask any AI model or a local one, let Claude Code edit it live over MCP, or map a GitHub repo with every arrow cited to a file and line. MIT, local-first, no account.
# Add to your Claude Code skills
git clone https://github.com/openflowkit/openflowkitSee how openflowkit compares with popular alternatives.
openflowkit is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by openflowkit. Free, open-source diagram canvas. Draw it, write it as code (Mermaid, D2, Structurizr in), ask any AI model or a local one, let Claude Code edit it live over MCP, or map a GitHub repo with every arrow cited to a file and line. MIT, local-first, no account. It has 854 GitHub stars.
openflowkit's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/openflowkit/openflowkit" and add it to your Claude Code skills directory (see the Installation section above).
openflowkit is primarily written in TypeScript. It is open-source under openflowkit on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh openflowkit against similar tools.
No comments yet. Be the first to share your thoughts!
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Connect Claude Code, Cursor or any MCP client and ask for a diagram. The agent reads the page, draws, restyles and takes a screenshot to check its own work while you watch. Every change it makes is one undo step, like your own. Connect your agent ↓
flowchart right
Client [blue] -> "API Gateway" [emerald] : HTTPS
"API Gateway" -> Queue [queue, amber]
Queue -> Worker
Worker -> Store [cylinder, red, bold]
Open the code panel (⌥C), paste this into it and press ⌘↵. Drag things around on the canvas or edit the text; ⌘↵ regenerates the frame from the text as one undo step. Paste Mermaid, Structurizr or D2 and it converts.
Type owner/repo into the box on an empty canvas and press Map repo, or open
app.openflowkit.com/#/map/github/<owner>/<repo>
(try a sample).
Your browser reads the public repo from GitHub and draws its parts. Boxes open in place, and every
arrow lists the file:line behind it, linked to the code. No key and no install. For a private
repo, map a checkout: npx openflowkit map . --html map.html.
PNG, SVG, PDF, JSON, or Copy as Mermaid for a README. Add an animate block to the text
above to name the steps, and the export renders animated SVG, GIF, MP4 or WebM in your browser.
animate build 6s loop {
step Client
step Client -> "API Gateway" : HTTPS
step Queue, Worker
step Store hold 2s
}
That animation is the two snippets above, exported by the app as an animated SVG. GitHub plays it like an image.
Every type is the same short, forgiving text, with per-line errors that say how to fix them.
Each picture below is the first example on its docs page, rendered by the openflowkit CLI.
The language is versioned and written down in one file: src/dsl/grammar.md (docs). The same text powers the code panel, the assistant, the MCP tools and the CLI.
In the browser: app.openflowkit.com. Nothing to install, no account.
In a terminal: npx openflowkit (Node 20.11+).
Run it locally (Node 22.22+):
git clone https://github.com/openflowkit/openflowkit.git
cd openflowkit
npm install && npm run dev # http://localhost:3000
OpenFlowKit has one set of agent tools. Pick the row for where your agent runs:
| Your agent runs… | How to connect | What it can do |
|---|---|---|
| On your computer: Claude Code, Cursor, VS Code, Claude Desktop, Windsurf | The MCP server, below | Everything: draws on your open canvas (one undo step per change), edits .openflow.json files in your repo, maps a codebase, takes screenshots |
| **In |