Getting started

The fastest way to use Stack is the browser Playground. It runs the formatter, validator, layout engine, and SVG renderer locally in WebAssembly; you do not need to install a command or send source to a rendering API.

Write your first document

Replace the editor content with this example:

stack 1.0

diagram "Checkout" {
  theme default

  node shopper "Shopper" {
    kind actor
  }

  group application "Application" {
    node web "Web app" {
      kind client
      detail "React"
    }

    node api "Checkout API" {
      kind service
      detail "Rust"
    }

    layout {
      direction right
      order [web, api]
    }
  }

  node orders "Orders" {
    kind database
    detail "PostgreSQL"
  }

  edge shopper -> web "HTTPS" {
    kind request
  }

  edge web -> api "JSON" {
    kind request
  }

  edge api -> orders "SQL" {
    kind data
  }

  layout {
    direction right
    order [shopper, application, orders]
  }
}

Render and inspect

Select Run or press Command/Ctrl + Enter. The preview shows a standalone SVG. Select the preview to inspect it at a larger size, then use Download SVG when you want the file.

The source has four parts:

1. stack 1.0 declares the language version.
2. diagram provides one title and contains the architecture.
3. node and group declare components and boundaries.
4. edge records relationships, while layout supplies constrained placement intent.

Check and format

Use Check to run the complete validation and layout pipeline without replacing the SVG. Use Format to rewrite syntactically valid source into the canonical two-space form while preserving line comments and meaning.

If Stack finds a problem, the diagnostic shows its severity, stable code, location, source frame, expected values, and corrective help when available. Selecting a diagnostic focuses its source range.

Choose what to learn next

• Read Document and syntax for lexical rules and the complete grammar.
• Read Nodes and groups to model components and boundaries.
• Read Edges and layout for relationships and placement intent.
• Read Themes and icons before selecting a visual system or explicit icon.