Flowchart

Skill shuakami/paperchart/skills/flowchart

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

Install

npx -y skills add shuakami/paperchart --skill flowchart

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 flowchart (Mermaid `flowchart TD` / `LR` equivalent). A directed graph of labeled nodes with decision diamonds, stadium terminals, cylinder stores, and orthogonal edges. The layout is a layered DAG computed from the longest forward path; back-edges (cycles / retries) are detected and drawn as loop-back arrows so the forward flow stays clean.

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.6 KB, as published. Nobody here has run it

paperchart — flowchart

Layered flowchart. Nodes pick from five shapes; edges are orthogonal with triangular arrowheads; optional per-edge labels sit on the bend with a small bg-tinted box so they read over any crossing line.

When to use

Request / response pipelines with decisions.
Retrieval, indexing, or build pipelines with retry branches.
Any DAG where shape conveys role (terminal vs. decision vs. process vs. store).

Input shape

{
  "data": {
    "direction": "TD",
    "nodes": [
      { "id": "q",     "label": "user query",     "shape": "stadium" },
      { "id": "norm",  "label": "normalize",      "caption": "lower + nfc", "shape": "rect" },
      { "id": "cache", "label": "cache hit?",     "shape": "diamond" },
      { "id": "idx",   "label": "fetch pack",     "caption": "brotli decode", "shape": "cylinder" },
      { "id": "score", "label": "score + rank",   "shape": "rect", "accent": true },
      { "id": "out",   "label": "render results", "shape": "stadium" }
    ],
    "edges": [
      { "from": "q",     "to": "norm" },
      { "from": "norm",  "to": "cache" },
      { "from": "cache", "to": "idx",   "label": "no" },
      { "from": "cache", "to": "out",   "label": "yes" },
      { "from": "idx",   "to": "score" },
      { "from": "score", "to": "out" }
    ]
  }
}

Node shapes

shape	use for
`stadium`	start / end terminals
`rect`	process steps (default)
`round`	soft-edged process steps
`diamond`	decisions (yes / no, match / no)
`cylinder`	data stores (index, cache, db)

Accents

node.accent: true — outlines the node in accent and fills with panel tint.
edge.accent: true — colors the arrow in accent (e.g. the happy path).
edge.dashed: true — dashed line (retry, fallback, feedback edge).

Direction

TD (top-down, default) or LR (left-to-right). The layout recomputes layers accordingly; the back-edge detector is direction-agnostic.

CLI

paperchart flowchart -i data.json -o flow.png
paperchart flowchart --defaults -o flow.png