flawly Diagrams

Live-preview and create .flawlydiagram files directly in VS Code.

Features

Instant preview — open any .flawlydiagram file and the rendered diagram appears in a split panel, updating on every save
Four diagram types — cloud architecture, entity-relationship, sequence, and flowchart
Export — save the diagram as PNG, JPG, or SVG via the toolbar
Light + dark mode — preview follows your VS Code theme
Web compatible — works in VS Code for the Web (vscode.dev) as well as desktop

Getting Started

Install this extension from the VS Code Marketplace
Create a file ending in .flawlydiagram
The preview panel opens automatically

flowchart-diagram

title "My First Diagram"
direction right

A [label: "Start"] > B [label: "Process"] > C [label: "End", shape: oval]

AI Generation

Let your AI coding assistant generate and validate diagrams for you.

Setup (one command)

npx skills add saikethan27/flawly-skills

This installs the flawly skill into Claude Code, Cursor, Codex, Gemini CLI, Continue, Windsurf, and 50+ other AI tools simultaneously. No further configuration needed.

What happens after install

Ask your AI tool to generate a diagram in plain English:

"Generate an architecture diagram for my auth service" "Draw an ERD for the users and orders tables" "Create a sequence diagram for this login flow"

The AI will:

Generate a .flawlydiagram file using the flawly DSL
Automatically validate it with npx flawly-skills validate
Fix any errors and re-validate

Once the file is on disk, open it in VS Code for the visual preview.

Validation CLI

The skill installs a standalone validator that works without VS Code:

npx flawly-skills validate path/to/diagram.flawlydiagram   # exits 0 if valid, 1 if not
npx flawly-skills list-icons --prefix=aws-                 # discover icon names
npx flawly-skills list-shapes --type=flowchart-diagram     # discover shape keywords

Output is JSON — designed to be consumed by AI tools or piped into other scripts.

Skill source

The skill and CLI are published as an npm package. The source is on GitHub:

Skill + CLI: github.com/saikethan27/flawly-skills — npx skills add saikethan27/flawly-skills
npm: flawly-skills

Diagram Types

Type	First line	Best for
Cloud architecture	`cloud-architecture-diagram`	AWS / Azure / GCP infra, system architecture
Entity relationship	`entity-relationship-diagram`	Database schemas, data models
Sequence	`sequence-diagram`	API flows, service interactions
Flowchart	`flowchart-diagram`	Process flows, user journeys, decision trees

Settings

Setting	Default	Description
`flawly.exportPath`	workspace root	Default folder for exported images
`flawly.exportFormat`	`png`	Export format: `png`, `jpg`, or `svg`
`flawly.exportScale`	`2`	Pixel scale multiplier for PNG/JPG (higher = sharper)

Requirements

VS Code ^1.74.0
No other dependencies — the parser runs entirely in the extension

License

MIT