Ziqurat
How it works

Write an outline. Get a diagram.

Everything in Ziqurat is driven by plain text. This guide covers the whole syntax, from nesting your first notes to connections, colors and running totals. Every example below is drawn live by the same engine the workspace uses.

The basics

Every line of your outline becomes a box in the diagram. Lines with no hyphens in front are top-level items. Each one gets its own color and sits side by side with the others.

Put hyphens in front of a line to nest it inside the item above it. One hyphen (-) makes a child, two (--) make a grandchild, and so on, as deep as you like. Children are drawn inside their parent's box and take on a lighter shade of its color.

Outline
Product launch
- Research
-- Customer survey
-- Competitor review
- Build
-- Design
-- Development
- Launch
Marketing
- Blog posts
- Social
Diagram

Blank lines are ignored, so feel free to space things out while you're typing. The diagram updates as you type, and in your own projects everything saves automatically.

Keys

A key is a short name in square brackets at the start of a line, right after any hyphens: [A] Sign up or - [review] Review application. Keys show up as a small tag on the box, and they give you a way to refer to that item elsewhere in the outline, for connections and alignment.

Outline
[A] Sign up
- [A1] Enter email
- [A2] Choose a password
[B] Verify email
Diagram

A key can be any short label: letters, numbers, a word. Keep each key unique so connections always know where to point. The brackets also hold an item's settings, color and value. If you only want those and don't need a name, leave the key out: [*bold] Launch works fine.

Connections

End a line with ->[key] to draw an arrow from that item to the item with that key. The arrow can point anywhere in the diagram: a sibling, a different branch, or something in another top-level group entirely.

To label an arrow, put a word between the dash and the tip: -Yes>[welcome] draws an arrow to [welcome] with "Yes" written along the line.

Outline
Customer onboarding
- Sign up ->[review]
- [review] Review application
-- Approve -Yes>[welcome]
-- Reject -No>[followup]
- [welcome] Send welcome kit
- [followup] Send follow-up email
Diagram

Each line can have one outgoing connection, but any number of items can point to the same key. Connection labels can't contain hyphens, so write "Follow up" rather than "Follow-up". Hyphenated words elsewhere in the text are fine.

Transparent containers

Use curly braces instead of square brackets, {key}, to make an item a transparent container. It works just like a key (connections and settings behave the same) but the box is drawn as an outline with no background fill.

Transparent containers are for grouping. Their children don't inherit a shade of the container's color. Each child gets a fresh color of its own, as if it were a top-level item. That makes them handy for wrapping several distinct sections under one heading.

Outline
{phases} Project phases
- Plan
-- Scope
-- Budget
- Build
-- Prototype
- Ship
Diagram

You can leave the key empty, {} Project phases, if you don't need to refer to it.

Settings

Settings change how an item is drawn. Add them inside an item's brackets after the key, each starting with an asterisk: [ops *dashed]. You can stack several, like [ops *dashed *bold].

*hideKeysHides the key tags on the boxes. The keys still work for connections and alignment.
*dashedDraws the box border as a dashed line. Good for optional or tentative items.
*boldGives the box a thicker border and a drop shadow so it stands out.
*verticalStacks the item's children top to bottom in a single column, placed to the right of the item's name. Great for agendas, checklists and stacking swimlanes.
*horizontalLays the item's children out side by side in rows. This is the default; use it to switch an inherited *vertical back off, e.g. for lanes stacked by a *vertical parent.
*noValueHides the item's own number. See values.

Settings carry down: a setting on an item applies to that item and everything nested inside it. *noValue is the one exception and only affects the item it's on.

To apply a setting to the whole diagram, put it on its own line with no hyphens or brackets, for example *hideKeys. Placing these at the top of your outline keeps them easy to find.

Outline
*hideKeys
[ops *dashed] Operations
- Hiring
- Payroll
[launch *bold] Launch
- Press release
[agenda *vertical] Meeting agenda
- Introductions
- Status updates
- Open questions
Diagram

Colors

The color scheme

Each top-level item takes the next color from a six-color palette: Primary, Secondary, and Accent colors 1 through 4. After the sixth item the palette starts over. Everything nested inside an item uses the same color, a little lighter at each level, so you can tell at a glance which branch a box belongs to.

In your own projects you can change the palette. The six color swatches in the workspace header are the six palette colors, so click any swatch to pick a new color. The diagram updates right away, and the colors are saved with that project, so each project can have its own scheme. Guest mode always uses the default palette.

Coloring a single item

To give one item a specific color, put a hex code in its brackets: [#ffcc00], or alongside a key and settings, [finance #EFAC52 *bold]. That exact color becomes the box's background, and the border and text adjust automatically to stay readable. Its children inherit the color, getting lighter at each level, until another item sets its own.

Outline
[#2F4C91] Leadership
- Strategy
-- Roadmap
--- Q3 goals
- [#EFAC52] Finance
-- Budget
Diagram

Both short (#fc0) and full (#ffcc00) hex codes work.

Values and totals

Items can carry numbers, which is useful for budgets, estimates, headcounts or point totals. Add a value inside the brackets as an asterisk, an operator and a number:

*+6Add 6 to the total of its children
*-6Subtract 6 from the total of its children
**2Multiply the total of its children by 2
*/2Divide the total of its children by 2

Totals are worked out from the bottom up:

  • An item with no children just shows its own number. The operator doesn't matter, so [*+400] on its own simply means 400.
  • An item with children adds up its children's numbers, then applies its own operator. [**3] over children totaling 550 shows 1,650.
  • An item with valued children but no value of its own just shows the sum of its children.
Outline
[*+500] Event budget
- [*+2500] Venue
- [**3] Catering (3 days)
-- [*+400] Lunch
-- [*+150] Coffee
- [*noValue *+300] Signage
Diagram

Here, Catering is (400 + 150) × 3 = 1,650, and the event total is 2,500 + 1,650 + 300 + 500 = 4,950. Signage uses *noValue, so its number is hidden on its own box but still counts toward the total. To hide every number in the diagram, put *noValue on its own line.

Alignment

Sometimes two items in different branches belong in line with each other, like the same milestone in two teams' plans. End a line with ::key to line that item up with the item that has that key.

This is what makes swimlane diagrams work. Here each team is a lane, with *vertical stacking its steps in a column. Team B skips the Build step, so its Ship would normally sit right under Plan. Aligning it with ::shipA drops it down level with Team A's Ship, leaving a gap where Build would be.

Outline
[*vertical] Team A
- Plan
- Build
- [shipA] Ship
[*vertical] Team B
- Plan
- Ship ::shipA
Diagram

Alignment moves an item along its own lane, so the direction depends on how its parent arranges its children:

  • In a *vertical column, the item moves down to the same height as its target, as above.
  • In a row (the default, or *horizontal), the item moves right to the same position as its target.

So for lanes stacked top to bottom, give the outer item *vertical to stack the lanes, and each lane *horizontal so its steps run left to right:

Outline
[*vertical] Release
- [*horizontal] Team A
-- Plan
-- Build
-- [shipA] Ship
- [*horizontal] Team B
-- Plan
-- Ship ::shipA
Diagram

Alignment never moves an item backwards, so one that's already further along than its target stays where it is. Anything after it in the same lane moves along with it. It can be combined with a connection in either order: ->[a]::b and ::b->[a] both work.

Pasting from other apps

Already have notes in OneNote, Joplin, or another app with bulleted lists? Copy them and paste straight into the outline. Ziqurat reads the indentation and converts it to hyphens for you, dropping the bullet characters along the way. Checkboxes from to-do lists come through as ☐ and ☑.

If the result isn't what you wanted, press Ctrl+Z (⌘+Z on a Mac) to undo the whole paste. To paste the text exactly as copied, without converting it, use Ctrl+Shift+V (⌘+Shift+V on a Mac).

Text that's already in Ziqurat's hyphen format is pasted as-is.

Working in the workspace

  • Find a line from the diagram: hover over a box to highlight its line in the outline. Click a box to keep it highlighted, and click empty space to clear it.
  • Find a box from the outline: put your cursor on a line and its box is highlighted in the diagram.
  • Resize the panels: drag the divider between the outline and the diagram.
  • Zoom: use the controls in the bottom-right corner of the diagram.
  • Diagram width: the diagram fits the window by default. Type a width in pixels in the top-right box to set it yourself, which is useful for exports. Click the reset button beside it to go back to fitting the screen.
  • Syntax hints: hover the ⓘ icon under the outline for a quick reminder of the syntax.

Each project's outline can be up to 20,000 characters. Guest mode lets you try everything without an account, with a 2,000-character limit. It saves only in your browser, so nothing is stored on the server.

Exporting and sharing

Download an image

Click Export in the workspace header, then Download PNG. The image is rendered at double resolution so it stays sharp in slides and documents, and it uses your project's custom colors. Check Include outline text to add your outline in a panel beside the diagram, which is handy when the reader needs the details as well as the picture.

Share a link

Click Share and switch on Public link to get a read-only link to the project. Anyone with the link can view the outline and diagram but can't change anything. Projects are private until you turn this on.

Switch the link off at any time and it stops working right away. If you switch it back on later, the same link works again.

Exporting and sharing need an account. They aren't available in guest mode.

Quick reference

- -- …Nest a line one level deeper per hyphen
[key]Name an item (at the start of the line)
{key}Name an item and draw it as a transparent container
->[key]Connect to an item (at the end of the line)
-Label>[key]Connect with a label on the arrow
::keyLine up with an item (at the end of the line); moves right in a row, down in a *vertical column
[key #hex]Set an item's color
[key *setting]*hideKeys *dashed *bold *vertical *horizontal *noValue
*setting lineApply a setting to the whole diagram
[key *+6]Give an item a value (+ - * /)

Still stuck, or have an idea for a feature? Get in touch.

Try it with your own notes.

No account needed to start.

Open the editor
Ziqurat © 2026 Ziqurat