app-state-diagram is a tool that visualizes state transitions and information structures of RESTful applications. It generates interactive state diagrams and hyperlinked documentation from ALPS (Application-Level Profile Semantics) profiles written in XML or JSON.
- Application Overview: Visually grasp complex RESTful applications and understand the big picture
- Clear Information Semantics: See how data flows and what each element means
- Enhanced Team Communication: Both technical and business teams can discuss using the same visual representation
- Design Consistency: Represent application structures uniformly and discover design issues early
https://editor.app-state-diagram.com/
brew install alps-asd/asd/asdAuto-updates with brew upgrade.
Prerequisites: PHP 8.1+, Composer
composer require koriym/app-state-diagramcurl -O https://raw.githubusercontent.com/alps-asd/app-state-diagram/master/docs/bookstore/alps.xml
asd alps.xml # or ./vendor/bin/asd for Composer
open index.html # on macOSasd [options] <profile.json|profile.xml>| Option | Description |
|---|---|
--mode=html |
Generate interactive HTML (default) |
--mode=markdown |
Generate markdown documentation |
--mode=svg |
Generate SVG diagrams for embedding |
--watch, -w |
Enable watch mode with live browser sync |
--port=N |
Set development server port (default: 3000) |
SVG mode generates two standalone SVG files:
profile.svg- Main diagram with descriptor IDsprofile.title.svg- Diagram with human-readable titles
Tip: Install Graphviz (
dot) for better multibyte character rendering.
See these live demos:
See AI Integration Guide for setting up Claude Code, MCP Server, or other AI tools.