Produces a full application state diagram and hyperlinked documentation from ALPS file.

The diagram is hypermedia in SVG format with application states and state transitions linked to the respective semantic descriptor document HTML. The semantic descriptor document HTML is also linked to each other to represent the structure of the REST application.

See online demo.

• blog
• todomvc

• php
• composer
• graphviz
• npm

You can check with the following command.

% php -v
PHP 8.0.6 (cli) (built: May  8 2021 01:58:51) ( NTS )

% composer -V
Composer version 2.0.13 2021-04-27 13:11:08

% dot -V    
dot - graphviz version 2.47.1 (20210417.1919)

% npm -v
7.17.0

composer global require koriym/app-state-diagram

composer global exec asd -- [options] [alpsFile]

    -c, --config=asd.xml
        Path to a asd.xml configuration file

    -w, --watch
        Watch mode

    --and-tag={tag1, tag2} --or-tag={tag3} [--color=red]
        Filter graph

    -l, --label={id|title|both}
        Displayed words

• Supports XML and JSON formats.
• If you run it without the arguments,asd.xml config file in the same folder is used.

ASD uses an XML config file (by default, asd.xml). A barebones example looks like this:

<?xml version="1.0"?>
<asd xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:noNamespaceSchemaLocation="https://koriym.github.io/app-state-diagram/asd.xsd">
    <alpsFile>profile.xml</alpsFile>
</asd>

<asd
  <watch>[bool]</watch>
</asd>

You can start ASD development server with watch mode. Each time the profile file changes, the page is reloaded.

<asd
  <filter>
    <and>[string]</and>
    <and>[string]</and>
    <or>[string]</or>
    <color>[string]</color>
  </filter>
</asd>

You can extract partial graphs by specific tags, or color specific graphs.

Specify a tag name in the "or" or "and" field to specify the condition. If you specify "color", the graph for that condition will be colored, but if you don't, only the graph for that condition will be extracted and drawn.

<asd
  <label>[string]</label>
</asd>

Choose the word to display in the diagram from id, title, both.

composer global update koriym/app-state-diagram

Download profile.example.json

% composer global exec asd ./profile.example.json 
Changed current directory to /Users/akihito/.composer
ASD generated. ./index.html

Open index.html with browser.

open ./index.html