Interactive Syntax-to-Tree IA Diagrammer
Map out your application's structure. Click any card to navigate your code instantly.
Click to Load a Kickstart Template
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
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]}
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}
InfoArch supports powerful model declarations. You can easily specify comments (help tooltips) and navigation pointer paths using `href`:
button: Proceed to Pay {id: proceed_btn, href: payment_view}
input: Promo Code {id: discount, comment: "Applies 10% coupon codes"}