Architecture

Skill shuakami/paperchart/skills/architecture

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

Install

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

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 system-architecture diagram. Services are grouped into labeled panels (client, edge, backend, data, observability, …); each panel stacks its services vertically. Connections draw smooth cubic bézier curves between services and can be marked accent, dashed, or bidirectional. Use for architecture posts, design documents, onboarding diagrams.

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

paperchart — architecture

Grouped service diagram. Each top-level group is a labeled panel with its own header and caption; services stack inside the panel. Connections cross panel boundaries and are drawn with smooth bézier curves plus arrowheads.

When to use

System architecture posts (client / edge / backend / data).
Explaining request routing and data dependencies.
Any layered system with grouping semantics.

Input shape

{
  "data": {
    "groups": [
      { "id": "client",  "label": "client",  "caption": "browser + native",
        "services": [
          { "id": "web",     "label": "web app",    "caption": "React SPA" },
          { "id": "mobile",  "label": "mobile",     "caption": "iOS + Android" }
        ]
      },
      { "id": "edge",    "label": "edge",    "caption": "global, stateless",
        "services": [
          { "id": "gateway", "label": "API gateway", "caption": "auth + rate limit", "accent": true }
        ]
      },
      { "id": "backend", "label": "backend", "caption": "regional, stateful",
        "services": [
          { "id": "search", "label": "search service" },
          { "id": "users",  "label": "users service" }
        ]
      }
    ],
    "connections": [
      { "from": "web",     "to": "gateway", "accent": true },
      { "from": "mobile",  "to": "gateway" },
      { "from": "gateway", "to": "search" },
      { "from": "gateway", "to": "users",   "dashed": true }
    ]
  }
}

Connection options

label — text rendered on the curve, with a bg-tinted box behind it.
accent: true — draws in the theme accent.
dashed: true — dashed stroke (optional, async, fallback path).
bidirectional: true — arrowheads on both ends.

Layout

Groups are stacked left-to-right by order in the input.
Services inside a group stack top-to-bottom.
Group widths auto-distribute across the canvas; all groups share the same height (determined by the group with the most services).
Labels on edges stagger along the path index so parallel fan-out edges (one gateway → many services) don't stack at the same midpoint.

CLI

paperchart architecture -i data.json -o arch.png
paperchart architecture --defaults -o arch.png