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(6mo ago)39243.1k↓14.8%11[1 PRs](https://github.com/alps-asd/app-state-diagram/pulls)2MITTypeScriptPHP ^8.1CI passing

Since Nov 7Pushed 3w ago6 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 3d 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/2.x/docs/demo/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://alps-asd.github.io/app-state-diagram/ai-integration.html) for setup (requires `alps2mock` skill).

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

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

This repository includes `.mcp.json` for MCP clients. It starts the ALPS MCP server with:

```
{
  "command": "npx",
  "args": ["-y", "@alps-asd/mcp"]
}
```

See [AI Integration Guide](https://alps-asd.github.io/app-state-diagram/ai-integration.html) and [MCP Server README](packages/mcp/README.md) for Claude Code, Claude Desktop, and other AI tools.

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

[](#documentation)

- [AI Integration Guide](https://alps-asd.github.io/app-state-diagram/ai-integration.html)
- [MCP Server](packages/mcp/README.md)
- [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

58

—

FairBetter than 98% of packages

Maintenance82

Actively maintained with recent releases

Popularity47

Moderate usage in the ecosystem

Community21

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 89.5% 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

205d 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 (154 commits)")[![claude](https://avatars.githubusercontent.com/u/81847?v=4)](https://github.com/claude "claude (18 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.5k196.2M3.1k](/packages/composer-composer)[friendsofphp/php-cs-fixer

A tool to automatically fix PHP code style

13.5k251.2M25.3k](/packages/friendsofphp-php-cs-fixer)[w7corp/easywechat

微信SDK

10.4k834.8k64](/packages/w7corp-easywechat)[civicrm/civicrm-core

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

751291.4k43](/packages/civicrm-civicrm-core)[moodle/moodle

Moodle - the world's open source learning platform

7.2k88.5k88](/packages/moodle-moodle)[craftcms/feed-me

Import content from XML, RSS, CSV or JSON feeds into entries, categories, Craft Commerce products, and more.

293952.6k33](/packages/craftcms-feed-me)

PHPackages © 2026

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