koriym / app-state-diagram
An Application Diagram Generator
Installs: 203 664
Dependents: 1
Suggesters: 0
Security: 0
Stars: 36
Watchers: 5
Forks: 12
Open Issues: 0
Language:TypeScript
pkg:composer/koriym/app-state-diagram
Requires
- php: ^8.1
- ext-dom: *
- ext-filter: *
- ext-json: *
- ext-libxml: *
- ext-mbstring: *
- ext-simplexml: *
- koriym/data-file: ^1.0
- michelf/php-markdown: ^1.9
- seld/jsonlint: ^1.8
- symfony/polyfill-php81: ^1.31
Requires (Dev)
- bamarni/composer-bin-plugin: ^1.4
- phpunit/phpunit: ^9.6.10
- rector/rector: ^1.1
- 0.17.0
- v0.16.0
- 0.15.0
- v0.14.4
- v0.14.3
- v0.14.2
- v0.14.1
- v0.14.0
- 0.13.4
- 0.13.3
- 0.13.2
- 0.13.1
- 0.13.0
- 0.12.2
- 0.12.1
- 0.12.0
- 0.11.12
- 0.11.11
- 0.11.10
- 0.11.9
- 0.11.8
- 0.11.7
- 0.11.6
- 0.11.5
- 0.11.4
- 0.11.3
- 0.11.2
- 0.11.1
- 0.11.0
- 0.10.4
- 0.10.3
- 0.10.2
- 0.10.1
- 0.10.0
- 0.9.8
- 0.9.7
- 0.9.6
- 0.9.5
- 0.9.4
- 0.9.3
- 0.9.2
- 0.9.1
- 0.9.0
- 0.8.0
- 0.7.1
- 0.7.0
- 0.6.0
- 0.5.1
- 0.5.0
- 0.4.2
- 0.4.1
- 0.4.0
- 0.3.6
- 0.3.5
- 0.3.4
- 0.3.3
- 0.3.2
- 0.3.1
- 0.3.0
- 0.2.0
- 0.1.3
- 0.1.2
- 0.1.1
- 0.1.0
- dev-master
- dev-feature/oidc-demo-app
This package is auto-updated.
Last update: 2025-12-26 11:41:43 UTC
README
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.
Key Benefits
- 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
Quick Start
Online Editor (No Installation)
https://editor.app-state-diagram.com/
Install with Homebrew (Recommended)
brew install alps-asd/asd/asd
Auto-updates with brew upgrade.
Install with npm
npm install -g @alps-asd/cli
Try It
curl -O https://raw.githubusercontent.com/alps-asd/app-state-diagram/master/docs/bookstore/alps.xml
asd alps.xml
open index.html # on macOS
CLI Options
asd [options] <profile.json|profile.xml>
| Option | Description |
|---|---|
-o, --output <file> |
Output file path |
-f, --format <format> |
Output format: html (default), svg, dot, mermaid |
-w, --watch |
Watch mode with live reload |
--port <port> |
CDP port for watch mode (default: 9222) |
--label <mode> |
Label mode: id (default) or title |
--validate |
Validate ALPS profile only |
-e, --echo |
Output to stdout |
Subcommands
asd merge <base.json> <partial.json> # Merge partial ALPS into base profile
Watch Mode
Start watch mode with automatic Chrome launch and live reload:
asd -w profile.json
Chrome opens automatically with remote debugging enabled. Changes to the ALPS file trigger instant browser refresh.
Validation
The validator checks for errors, warnings, and suggestions:
- Errors (E001-E011) - Missing id/href, missing rt, invalid type, broken references, duplicate ids, etc.
- Warnings (W001-W004) - Missing title, naming conventions (go*/do* prefixes), orphan descriptors
- Suggestions (S001-S003) - Consider adding doc/title to improve documentation
See Validation Issues Reference for detailed explanations and how to fix each issue.
asd profile.json --validate
Examples
See live demos or visit app-state-diagram.com
Design Application with AI
See AI Integration Guide for setting up Claude Code, MCP Server, or other AI tools.
Documentation
Related Projects
- ALPS Specification
- alps-editor - Online ALPS editor
License
MIT