Article Diagram

Turn a written explanation into a clear diagram.

Give your Agent an article. It chooses a flow, comparison or hierarchy and preserves conditions and source evidence. Keep an editable diagram. Sign in for the free package and use it in your own Codex project.

An SVG for your article, with optional PNG export.
Editable JSON, offline HTML, per-item excerpts and source hashes.
Revise one part, export again and keep the previous version.

Available now · v1.0.0

Free after sign-in.

What would you like to make?

Explain a process

Explain steps and what each condition leads to.

A flowchart with conditions and source-linked arrows.

Compare options

Compare two or three options along shared dimensions.

A comparison with cell-level evidence and explicit unknowns.

Organize a hierarchy

Explain ownership across teams, modules or concepts.

An editable hierarchy preserving responsibilities and limits.

Compare options without filling in unknowns

Actual output · original fictional example

The input

Original fictional policy: on-site book loans, online discussion notes; online sessions are not recorded, on-site recording is unspecified.

The work

Organize location, sign-up, materials and recording; attach a source quote to every cell and preserve unknowns.

Browse all output examples

Actual output · Chinese comparison — Original fictional reading-group policy. Distinguishes “not recorded” from “not specified”; rendered by the package.
Actual output · English branching flow — Fictional library workflow with a waiting-list branch and no invented path back to collection.
Actual output · Chinese hierarchy — Original reading-group hierarchy preserving the limit on collecting identity numbers.
AI concept · not runtime output — A paper-craft metaphor generated with Codex. It explains the purpose; the package does not generate this photograph.

From your material to the finished files

Read and model
Identify steps, branches, common comparison dimensions or parent-child links. Keep unstated facts unknown.
Render and inspect
Run the local tool for the figure and source index. Inspect actual text, arrows and meaning against the source.
Revise and preserve
Tell your Agent what to change. Update input and evidence, then export into a new folder without overwriting the old figure.

Bring this task into your Agent

Prepare these materials

Bring source text you may use, its audience and purpose. Your Agent prepares JSON for you. Source text is included in the handoff; review sensitive content before sharing.

Sign in to acquire the package.
Extract the entire folder into your project: .agents/skills/article-diagram/SKILL.md (Codex) or .claude/skills/article-diagram/SKILL.md (Claude Code).
Open a new chat in that project, attach your materials and replace the bracketed fields in the brief below. Ask the Agent to check package instructions and dependencies first.

Use article-diagram. First read the installed SKILL.md and INSTALL.md. Turn my supplied [source text] into a flowchart for [audience] and [purpose]. Preserve conditions, exceptions and unknowns, and attach exact source quotes to each item and relationship. Deliver SVG, offline HTML, editable JSON and a source index. Inspect the actual figure; export PNG if dependencies are available. Ask for missing source text instead of inventing evidence.

Installation & troubleshooting guide

The first result can be revised

Change the supplied return deadline from 16:00 to 15:00 the next day. Update the related node and evidence while retaining other conditions.

What the package includes

An SVG for your article, with optional PNG export.
Editable JSON, offline HTML, per-item excerpts and source hashes.

What you provide separately

Your own Codex access and Node.js 24; HTML/SVG need no npm packages.
PNG additionally needs Playwright 1.58.2 and Chromium or Chrome. Setup needs internet; rendering works offline.

Before you start

Can I provide only a topic?

This Skill explains supplied material. Without source text it asks for it rather than inventing facts and evidence.

Can I drag shapes in the page?

The HTML is for reading, evidence and downloads. Your Agent edits JSON and regenerates the figure; it is not a browser drawing editor.

What is supported?

Flows and hierarchies: up to 12 nodes and 4 per level. Comparisons: 2–3 columns and up to 10 rows. Feedback cycles are unsupported; split complex explanations into focused figures.

Does a citation prove it is correct?

No. The tool checks quote matches; the Agent still reviews context, arrow direction and unjustified causal claims.

Quote matching proves text exists, not semantic truth; your Agent must review relationships. No feedback cycles, numerical charting or in-browser drawing editor. Model fees are separate.

More to make

Xiaohongshu Note Cover — Create a bold headline, useful checklist or owned-visual cover with semantic title lines. Export a 1080×1440 PNG, editable HTML and JSON.
Open Graph Image — 1200x630 share images for blog posts, product launches and docs pages in English or Chinese, readable in small link previews, delivered with og:image tags.
Xiaohongshu Carousel Workflow — Turn owned notes into a source-linked 3–10 page carousel. Review each page revision, export PNGs and a PDF, and re-export selected pages.
GPT Prompt Studio — Turn a brief or reference into reusable image prompts, consistent campaign variants and precise portrait revisions.