{
  "markdown": "# app-state-diagram\n\n[![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)\n[![codecov](https://codecov.io/gh/alps-asd/app-state-diagram/branch/2.x/graph/badge.svg)](https://codecov.io/gh/alps-asd/app-state-diagram)\n\n<img src=\"https://www.app-state-diagram.com/images/logo.png\" width=\"120px\" alt=\"logo\">\n\n**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.\n\n[![App State Diagram](docs/demo/bookstore/alps.svg)](https://editor.app-state-diagram.com/)\n\n## Key Benefits\n\n- **Application Overview**: Visually grasp complex RESTful applications and understand the big picture\n- **Clear Information Semantics**: See how data flows and what each element means\n- **Enhanced Team Communication**: Both technical and business teams can discuss using the same visual representation\n- **Design Consistency**: Represent application structures uniformly and discover design issues early\n\n## Quick Start\n\n### Online Editor (No Installation)\n\n[https://editor.app-state-diagram.com/](https://editor.app-state-diagram.com/)\n\n### Install with Homebrew (Recommended)\n\n```bash\nbrew install alps-asd/asd/asd\n```\n\nAuto-updates with `brew upgrade`.\n\n### Install with npm\n\n```bash\nnpm install -g @alps-asd/app-state-diagram\n```\n\n### Try It\n\n```bash\ncurl -O https://raw.githubusercontent.com/alps-asd/app-state-diagram/2.x/docs/demo/bookstore/alps.xml\nasd alps.xml\nopen index.html  # on macOS\n```\n\n## CLI Options\n\n```bash\nasd [options] <profile.json|profile.xml>\n```\n\n| Option | Description |\n|--------|-------------|\n| `-o, --output <file>` | Output file path |\n| `-f, --format <format>` | Output format: `html` (default), `svg`, `dot`, `mermaid` |\n| `-w, --watch` | Watch mode with live reload |\n| `--port <port>` | CDP port for watch mode (default: 9222) |\n| `--label <mode>` | Label mode: `id` (default) or `title` |\n| `--validate` | Validate ALPS profile only |\n| `-e, --echo` | Output to stdout |\n\n### Subcommands\n\n```bash\nasd merge <base.json> <partial.json>  # Merge partial ALPS into base profile\n```\n\n## Watch Mode\n\nStart watch mode with automatic Chrome launch and live reload:\n\n```bash\nasd -w profile.json\n```\n\nChrome opens automatically with remote debugging enabled. Changes to the ALPS file trigger instant browser refresh.\n\n## Validation\n\nThe validator checks for errors, warnings, and suggestions:\n\n- **Errors (E001-E011)** - Missing id/href, missing rt, invalid type, broken references, duplicate ids, etc.\n- **Warnings (W001-W004)** - Missing title, naming conventions (go*/do* prefixes), orphan descriptors\n- **Suggestions (S001-S003)** - Consider adding doc/title to improve documentation\n\nSee [Validation Issues Reference](docs/issues.md) for detailed explanations and how to fix each issue.\n\n```bash\nasd profile.json --validate\n```\n\n## Examples\n\nSee [live demos](docs/demo/) or visit [app-state-diagram.com](https://www.app-state-diagram.com/app-state-diagram/)\n\n## Mock Generation\n\nGenerate 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.\n\n```\nalps.xml → html/ + css/level{1,2,3}.css + api/ + i18n/\n```\n\nSee [AI Integration Guide](https://alps-asd.github.io/app-state-diagram/ai-integration.html) for setup (requires `alps2mock` skill).\n\n## Design Application with AI\n\nThis repository includes `.mcp.json` for MCP clients. It starts the ALPS MCP server with:\n\n```json\n{\n  \"command\": \"npx\",\n  \"args\": [\"-y\", \"@alps-asd/mcp\"]\n}\n```\n\nSee [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.\n\n## Documentation\n\n- [AI Integration Guide](https://alps-asd.github.io/app-state-diagram/ai-integration.html)\n- [MCP Server](packages/mcp/README.md)\n- [Quick Start Guide](https://www.app-state-diagram.com/manuals/1.0/en/quick-start.html)\n- [Official Documentation](https://www.app-state-diagram.com/manuals/1.0/en/index.html)\n\n## Related Projects\n\n- [ALPS Specification](http://alps.io/)\n- [asd-action](https://github.com/alps-asd/asd-action) - GitHub Action for CI/CD\n- [alps-skills](https://github.com/alps-asd/alps-skills) - ALPS skills for Claude Code\n- [alps-skeleton-xml](https://github.com/alps-asd/alps-skeleton-xml) - ALPS skeleton (XML)\n- [alps-skeleton-json](https://github.com/alps-asd/alps-skeleton-json) - ALPS skeleton (JSON)\n\n## License\n\nMIT\n",
  "bytes": 4774,
  "sha": "c23b32545bfd66c90c8f1b1272a1036c5da6a28e75e468e763cc7f5989e18166",
  "repo_slug": "alps-asd/app-state-diagram",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_alps_asd_app_state_diagram_development_a_9baf2e81/readme"
}