Wiremark

Mermaid for UI wireframes. Write UI layouts as text, render them as clean SVG wireframes.

🔗 Try it in the browser — no signup · Templates · Docs

Why

Specs say "a page with a table, some filters, and a create button" — and five readers picture five different pages. Opening a design tool for an admin screen is overkill; a screenshot of boxes doesn't survive code review.

Wiremark makes screen layouts text: versionable, diffable, reviewable, and embeddable next to your docs. Same input, same wireframe, every time.

Install

npm install @guildmark/wiremark

ESM and CommonJS are both supported, with bundled TypeScript declarations. No runtime dependencies.

Usage

import { exportSVG } from "@guildmark/wiremark";

const svg = exportSVG(`
  wiremarkUI
    page "User Management" {
      sidebar {
        nav "Dashboard"
        nav "Users" active
        nav "Settings"
      }
      toolbar {
        search "Search users"
        button "Create user" primary
      }
      table "Users" {
        columns "Name", "Email", "Role", "Status"
        row "Alice", "[email protected]", "Admin", "Active"
      }
    }
`);

svg is a complete standalone SVG document — write it to a file, inline it in HTML, or commit it next to your docs.

PNG output

import { exportPNGNode } from "@guildmark/wiremark";

const png = await exportPNGNode(source); // Buffer

exportPNGNode requires the optional peer dependency:

npm install @resvg/resvg-js

In the browser, use exportPNG(source) instead — it rasterises via <canvas> and resolves to a Blob.

The DSL in 30 seconds

Every document starts with wiremarkUI (alias ui). Inside it, page blocks contain components:

wiremarkUI
  page "Settings" {
    header "Account"
    form {
      input "Email"
      input "Password"
      toggle "Two-factor auth" active
      button "Save" primary
    }
  }

~45 components — layout (header, sidebar, toolbar, section, grid, split, stack, card, footer, spacer), data (table, chart, field, metric, progress), forms (form, input, select, textarea, button, search, checkbox, radio, toggle), navigation (nav, tabs, breadcrumb, stepper, pagination), overlays (modal, drawer, toast), feedback (alert, banner, empty_state, skeleton), and content (text, title, badge, divider, avatar, list, code, image, link, icon).

Modifiers — primary, active, disabled, error, warning, info, horizontal, small, large, left, right.

Reusable components — declare once, reference anywhere:

sidebar SD {
  nav "Dashboard"
  nav "Users" active
}

page "Users" { SD }
page "Roles" { SD }

Multi-page flows — arrows lay pages out on a grid:

LOGIN --> DASHBOARD
DASHBOARD -d-> SETTINGS

Viewport — size "mobile" (390px) or size "tablet" (768px); default is 900px.

Full reference: wiremark.guildmark.cloud/docs/dsl-reference

API

| Export | Type | Description | |---|---|---| | exportSVG(source) | sync | Full pipeline → SVG string. The usual entry point. | | exportPNG(source) | async | Browser: rasterises via canvas → Blob. | | exportPNGNode(source) | async | Node: rasterises via resvg → Buffer. | | parse(source) | sync | Tokenise + parse → AST with errors attached. | | resolve(doc) | sync | Expand named references → resolved Document. | | render(doc) | sync | Resolved document → SVG string. |

The parser never throws. Errors accumulate on doc.errors and the renderer draws whatever is valid — so a live editor keeps rendering while the user is mid-keystroke:

import { parse, resolve, render } from "@guildmark/wiremark";

const doc = resolve(parse(source));
if (doc.errors.length) console.warn(doc.errors); // { type, message, line, column }
const svg = render(doc);

Notes

• Deterministic: the same source always produces the same SVG. Good for diffs and CI.
• No network access, no telemetry, no runtime dependencies.
• Exported SVGs carry a small "Made with Wiremark" attribution.

License

MIT © GuildMark