PHPackages                             koriym/app-state-diagram - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. koriym/app-state-diagram

ActiveLibrary[Utility & Helpers](/categories/utility)

koriym/app-state-diagram
========================

An Application Diagram Generator

0.17.0(5mo ago)38222.0k—4.3%11[1 issues](https://github.com/alps-asd/app-state-diagram/issues)2MITTypeScriptPHP ^8.1CI passing

Since Nov 7Pushed 2mo ago5 watchersCompare

[ Source](https://github.com/alps-asd/app-state-diagram)[ Packagist](https://packagist.org/packages/koriym/app-state-diagram)[ RSS](/packages/koriym-app-state-diagram/feed)WikiDiscussions 2.x Synced 1mo ago

READMEChangelog (10)Dependencies (7)Versions (65)Used By (2)

app-state-diagram
=================

[](#app-state-diagram)

[![CI](https://github.com/alps-asd/app-state-diagram/actions/workflows/ci.yml/badge.svg)](https://github.com/alps-asd/app-state-diagram/actions/workflows/ci.yml)[![codecov](https://camo.githubusercontent.com/847ad34956bed47c86fe17c163cdad7b9f857f2634cf1329b0b871c9c65def69/68747470733a2f2f636f6465636f762e696f2f67682f616c70732d6173642f6170702d73746174652d6469616772616d2f6272616e63682f322e782f67726170682f62616467652e737667)](https://codecov.io/gh/alps-asd/app-state-diagram)

[![logo](https://camo.githubusercontent.com/d43dbea4cda8b3b74ab52dea016434153d1cd0b541e6da856ad393868254abdd/68747470733a2f2f7777772e6170702d73746174652d6469616772616d2e636f6d2f696d616765732f6c6f676f2e706e67)](https://camo.githubusercontent.com/d43dbea4cda8b3b74ab52dea016434153d1cd0b541e6da856ad393868254abdd/68747470733a2f2f7777772e6170702d73746174652d6469616772616d2e636f6d2f696d616765732f6c6f676f2e706e67)

**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.

[![App State Diagram](docs/demo/bookstore/alps.svg)](https://editor.app-state-diagram.com/)

Key Benefits
------------

[](#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
-----------

[](#quick-start)

### Online Editor (No Installation)

[](#online-editor-no-installation)

### Install with Homebrew (Recommended)

[](#install-with-homebrew-recommended)

```
brew install alps-asd/asd/asd
```

Auto-updates with `brew upgrade`.

### Install with npm

[](#install-with-npm)

```
npm install -g @alps-asd/app-state-diagram
```

### Try It

[](#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
-----------

[](#cli-options)

```
asd [options]
```

OptionDescription`-o, --output `Output file path`-f, --format `Output format: `html` (default), `svg`, `dot`, `mermaid``-w, --watch`Watch mode with live reload`--port `CDP port for watch mode (default: 9222)`--label `Label mode: `id` (default) or `title``--validate`Validate ALPS profile only`-e, --echo`Output to stdout### Subcommands

[](#subcommands)

```
asd merge    # Merge partial ALPS into base profile
```

Watch Mode
----------

[](#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
----------

[](#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](docs/issues.md) for detailed explanations and how to fix each issue.

```
asd profile.json --validate
```

Examples
--------

[](#examples)

See [live demos](docs/demo/) or visit [app-state-diagram.com](https://www.app-state-diagram.com/app-state-diagram/)

Mock Generation
---------------

[](#mock-generation)

Generate a browsable HTML mock site from an ALPS profile. Every CSS class in the HTML is an ALPS descriptor ID — zero presentation classes. Switch between bare HTML, wireframe, and production quality by changing one CSS file.

```
alps.xml → html/ + css/level{1,2,3}.css + api/ + i18n/

```

See [AI Integration Guide](https://www.app-state-diagram.com/app-state-diagram/ai-integration.html) for setup (requires `alps2mock` skill).

Design Application with AI
--------------------------

[](#design-application-with-ai)

See [AI Integration Guide](https://www.app-state-diagram.com/app-state-diagram/ai-integration.html) for setting up Claude Code, MCP Server, or other AI tools.

Documentation
-------------

[](#documentation)

- [Quick Start Guide](https://www.app-state-diagram.com/manuals/1.0/en/quick-start.html)
- [Official Documentation](https://www.app-state-diagram.com/manuals/1.0/en/index.html)

Related Projects
----------------

[](#related-projects)

- [ALPS Specification](http://alps.io/)
- [asd-action](https://github.com/alps-asd/asd-action) - GitHub Action for CI/CD
- [alps-skills](https://github.com/alps-asd/alps-skills) - ALPS skills for Claude Code
- [alps-skeleton-xml](https://github.com/alps-asd/alps-skeleton-xml) - ALPS skeleton (XML)
- [alps-skeleton-json](https://github.com/alps-asd/alps-skeleton-json) - ALPS skeleton (JSON)

License
-------

[](#license)

MIT

###  Health Score

57

—

FairBetter than 98% of packages

Maintenance79

Regular maintenance activity

Popularity46

Moderate usage in the ecosystem

Community19

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 97.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~29 days

Total

64

Last Release

158d ago

PHP version history (3 changes)0.1.0PHP >=7.2.0

0.3.5PHP ^7.3 || ^8.0

0.11.9PHP ^8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/db4fc75ffc631168d0d7143b6f2c24b1534dfb921212bd851c026c5cbbb1344d?d=identicon)[koriym](/maintainers/koriym)

---

Top Contributors

[![koriym](https://avatars.githubusercontent.com/u/529021?v=4)](https://github.com/koriym "koriym (121 commits)")[![claude](https://avatars.githubusercontent.com/u/81847?v=4)](https://github.com/claude "claude (3 commits)")

---

Tags

alpsapi-specificationhypermedia-apistate-diagram

###  Code Quality

TestsPHPUnit

Static AnalysisRector

### Embed Badge

![Health badge](/badges/koriym-app-state-diagram/health.svg)

```
[![Health](https://phpackages.com/badges/koriym-app-state-diagram/health.svg)](https://phpackages.com/packages/koriym-app-state-diagram)
```

###  Alternatives

[composer/composer

Composer helps you declare, manage and install dependencies of PHP projects. It ensures you have the right stack everywhere.

29.4k187.2M2.6k](/packages/composer-composer)[friendsofphp/php-cs-fixer

A tool to automatically fix PHP code style

13.5k234.7M20.6k](/packages/friendsofphp-php-cs-fixer)[w7corp/easywechat

微信SDK

10.4k761.6k60](/packages/w7corp-easywechat)[vaimo/composer-patches

Applies a patch from a local or remote file to any package that is part of a given composer project. Patches can be defined both on project and on package level. Optional support for patch versioning, sequencing, custom patch applier configuration and patch command for testing/troubleshooting added patches.

2994.3M16](/packages/vaimo-composer-patches)[civicrm/civicrm-core

Open source constituent relationship management for non-profits, NGOs and advocacy organizations.

728272.9k20](/packages/civicrm-civicrm-core)[bruli/php-git-hooks

Git hooks for PHP projects.

675370.8k5](/packages/bruli-php-git-hooks)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)