schema

Untitled Diagram

Interactive Syntax-to-Tree IA Diagrammer

group Persona Filter

sell Tag Filter

Select a tag to list matching cards

menu_book Glossary

Elements and personas in alphabetical order

code Diagram Syntax Sync Active

error

Syntax Hint

explore

Information Architecture Canvas

Map out your application's structure. Click any card to navigate your code instantly.

Quick Formatting Guide

title: Name Set the dynamic diagram name displayed on the top header.

href: card_id Connects fields with navigational links (e.g. {id: link_a, href: billing_page}).

comment: "Hint" Displays a modern info-icon helper with interactive hover text.

persona: User Declares a system user persona. Generates an interactive dropdown filter on the canvas.

decision: Valid? Use decision, branch, selector, cluster, flow, and reference to model conditional flow and navigation.

condition: "yes" Add condition or action inside a child node attributes block to label its incoming connector.

Tab Key Press Tab inside the editor to cleanly indent child branches.

Click to Load a Kickstart Template

travel_explore Filter & Inspect

Statuses

Active Flags

Persona Access

arrow_drop_down

book

Diagram Syntax Reference Guide

1 Diagram Title

Use the title: tag at the start of your file to set the header title at the top of the interface screen.

title: My Checkout Process Flow

2 User Personas & Role Filtering

Declare roles to filter complex architectures for different users. Use persona: Name globally, then restrict elements:

persona: Customer
persona: Admin

page: Dashboard
  button: Standard Action
  button: Administrative Refund {personas: [Admin]}

3 Hierarchical Indentation

Build your tree levels using spaces or tabs at the start of each line (2 spaces per indent layer is recommended).

page: Homepage
  group: Header Section
    button: Login {id: auth_btn}

4 Advanced Element Reusability, Navigation Links & Comments

InfoArch supports powerful model declarations. You can specify comments (help tooltips), glossary descriptions, and navigation pointer paths using `href`:

Navigation Links (`href`): Use ID tags to represent navigation pointers between distinct areas of your IA diagram:
```
button: Proceed to Pay {id: proceed_btn, href: payment_view}
```
Explanatory Help tooltips (`comment`): Write descriptive guides on nodes using quotes:
```
input: Promo Code {id: discount, comment: "Applies 10% coupon codes"}
```

Glossary descriptions (`description`): Add descriptions to declared personas and elements so they appear in the floating glossary:

element: Promo Code {id: discount, description: "Reusable coupon input"}
persona: Customer {description: "Shops and completes checkout"}

5 Conditional Flow Controls & Navigation Shapes

Use VisVocab-inspired keywords to describe decisions, conditional branches, selectors, reusable flows, and navigation handoffs. Add condition or action inside child node attributes to label the incoming path.

page: Sign In
  decision: Credentials valid?
    page: Dashboard {condition: "yes"}
    branch: Recovery route {condition: "no"}
      page: Reset Password {condition: "known email"}
      continue: Contact Support {condition: "account locked"}

flow: MFA Flow {id: mfa_flow}
  entry: One-time code
  selector: Delivery channel
    page: SMS Verify {condition: "sms enabled"}
    page: Email Verify {condition: "email enabled"}

Flow keyword reference — an example of each option

decision Diamond. After an action, the system picks one result. decision: Credentials valid?

branch Triangle. Exactly one path is presented (mutually exclusive). branch: Recovery route {condition: "no"}

selector Trapezoid. One or more matching paths are presented. selector: Search results

cluster Circle. One condition presents all its children together. cluster: Premium bundle {condition: "premium"}

flow Reusable sequence container (like a subroutine). Give it an id. flow: MFA Flow {id: mfa_flow}

reference Placeholder that reuses a flow via href. reference: MFA Flow {href: mfa_flow}

entry Entry point where a flow begins. entry: One-time code

exit Exit point where a flow hands control back. exit: Resume sign in {condition: "verified"}

continue Continuation point bridging to another area or diagram. continue: Contact Support {condition: "locked"}

concurrent Half-circle. One action generates several simultaneous results. concurrent: Notify & redirect

file Dog-eared document. A non-navigational file (PDF, export, log). file: Audit Log {action: "write event"}

Choice semantics — how many downstream paths are presented

1 of branch — mutually exclusive. Exactly one of its paths is presented (dashed rose connectors).
1+ of selector — non-exclusive. One or more paths that meet the condition are presented (dashed cyan connectors). Ideal for search results.
all of cluster — one decision, many paths. Put the condition on the cluster itself; all its children are then presented together (solid fuchsia connectors). Place a cluster downstream of a branch or selector.

branch: Account plan
  page: Free tier {condition: "free"}
  cluster: Premium bundle {condition: "premium"}
    page: Advanced Dashboard
    page: Priority Support

selector: Search results
  page: Products {condition: "matches query"}
  page: Articles {condition: "matches query"}
  page: People {condition: "matches query"}

mail If you have any question, reach me by e-mail: contact@infographdiagram.org

favorite

Support InfoArch

InfoArch is free and open. If it's useful to you, consider supporting its development with a Bitcoin donation. Thank you! 🙏

currency_bitcoin Bitcoin Address

bc1qjldu5t8udj2sr6tdugmg0tc5ur77njteqqjm6y

Address copied to clipboard!