wiremark
A text-based, markdown-embeddable wireframing format
Inspired by YAML’s simplicity and
MUI’s readability —
a concise, agent-friendly, easy-to-read DSL for wireframes, rendered in
a hand-drawn, Balsamiq-like style. Embed it in markdown files the way
Mermaid does, or write it as standalone .wiremark files.
```wireframe
Wireframe mobile
Stack column gap=2
Typography h4 "Sign in"
TextField "Email"
TextField "Password"
Button "Sign in" contained
```That block describes a phone-sized sign-in screen: a heading, two fields, and a primary button. No coordinates, no styling, no boilerplate — just the structure.
The whole format is three ideas
Component names you already know
Stack, Card, Typography,
Button, TextField, AppBar,
Tabs, Drawer, Avatar, …
The vocabulary is wiremark’s own, but it borrows its names from
modern UI libraries like Material UI — if you’ve built with one,
you can read a wireframe without a reference.
Indentation is containment
A line indented under another line is its child. That single rule replaces every wrapper, brace, and closing tag — the shape of the text is the shape of the screen.
Defaults do the work
A bare component name renders something sensible. A lone
Typography is a line of placeholder text; a lone
Button reads “Button”. You add detail only where it
communicates something.
Built to live in your documents
Markdown-native
A wireframe is a fenced code block, so it travels with your specs, PRDs, READMEs, and design notes — and renders inline via thin host adapters (Obsidian, markdown-it, remark, …) over one pure core.
Flow for free
Frames are named with #id and linked with
to=#id, so an embedded navigation graph falls out of
the document automatically.
Agent-first
Intentionally low-ambiguity and low-token. An LLM can read, write, and reason about a wireframe with no reference doc, leaning on naming conventions it already knows from libraries like MUI.
Hand-drawn by default
Output is a deliberate sketch, not a polished mockup. A sketch invites feedback on structure instead of bikeshedding on colors.
Get wiremark
@wiremark/core 
The parser, layout engine, and hand-drawn SVG renderer behind everything. Pure JS, no host dependencies.
npm install @wiremark/core @wiremark/cli 
The command-line renderer — turn a .wiremark file into
an SVG without writing any code.
npx @wiremark/cli in.wiremark -o out.svg JetBrains IDE plugin 
Live split-pane preview for .wiremark files and
wireframe blocks in Markdown — in IntelliJ IDEA, WebStorm, and
every JetBrains IDE.
Install from inside your IDE: search for wiremark in the Plugins Marketplace.
View on the Marketplace →MIT licensed. wiremark is young and under active development. Follow along on GitHub.
Agent quick start
Working with an AI agent?
wiremark is agent-first by design, so an LLM can usually write it with no setup at all. But for a project that will lean on wireframes heavily, give your agent a head start:
SKILL.mdUse the wiremark skill
A drop-in skill that teaches Claude the full format — and stays out of the way until a wireframe comes up.
Get the skill →CLAUDE.md AGENTS.md Point your agent at an instruction file
Ready-made guide files for any LLM — reference one by URL from your agent's instructions, or download it straight into the repo.
Browse the instruction files →