State diagram

Skill shuakami/paperchart/skills/state-diagram

Quiet, editorial chart PNGs for technical blog posts. 15 primitives, six themes, one CLI.

Install

npx -y skills add shuakami/paperchart --skill state-diagram

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Render a state diagram (Mermaid `stateDiagram-v2` equivalent). Rounded-rect states laid out in layers by longest-path from the start pseudostate; back-edges (retry / reset transitions) drawn as loop-back arrows. Supports start (●) and end (⊙) pseudostates, labeled transitions, dashed transitions (error paths), and an accent state/transition.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.3 KB, as published. Nobody here has run it

paperchart — state diagram

States as rounded rectangles, transitions as curved arrows with event labels. Automatic layered layout; cycles (retry / reset transitions) are drawn as back-edges that don't distort the forward flow.

When to use

UI state machines (idle → loading → success / error).
Request lifecycle diagrams.
Game or protocol state transitions.

Input shape

{
  "data": {
    "direction": "LR",
    "states": [
      { "id": "init",    "label": "•",         "start": true },
      { "id": "idle",    "label": "idle",      "caption": "awaiting input" },
      { "id": "loading", "label": "loading",   "caption": "fetching data",  "accent": true },
      { "id": "ok",      "label": "success" },
      { "id": "err",     "label": "error",     "caption": "surface to user" },
      { "id": "end",     "label": "⊙",         "end": true }
    ],
    "transitions": [
      { "from": "init",    "to": "idle" },
      { "from": "idle",    "to": "loading", "label": "submit" },
      { "from": "loading", "to": "ok",      "label": "200",    "accent": true },
      { "from": "loading", "to": "err",     "label": "fail",   "dashed": true },
      { "from": "ok",      "to": "idle",    "label": "close" },
      { "from": "err",     "to": "idle",    "label": "retry" },
      { "from": "ok",      "to": "end",     "label": "exit" }
    ]
  }
}

Pseudostates

start: true renders a filled dot (●) instead of a rounded rect.
end: true renders a filled dot with an outer ring (⊙).
Give them an id and a placeholder label (e.g. "•" / "⊙"); the label is not drawn over pseudostates, only the symbol.

Direction

LR (default) or TD. Works the same as flowchart.

CLI

paperchart state-diagram -i data.json -o state.png
paperchart state-diagram --defaults -o state.png