artifact-diagramming

Featured

Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.

AI & Automation 64,796 stars 10637 forks Updated yesterday CC0-1.0

Install

View on GitHub

Quality Score: 90/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

Draw as the engineer who has to live with the decision, not as a decorator: a diagram earns its place when it lets a cold reader see a mechanism they would otherwise have to assemble from prose - where data flows, which components talk, what changes between two options, what state a request moves through. If a sentence says it faster, write the sentence. ## What to draw **Depict the mechanism, not its name.** A box labeled "cache" says less than the prose; the path a request takes through it, the two stores it sits between, and the arrow that disappears when the cache is removed say what the words can't. Show the parts that the argument hinges on - the boundary being crossed, the hop being added, the data that moves - and leave out the parts that don't. **Comparing options?** Draw the difference. Two architectures side by side, a before and an after, the one edge that each option adds or removes - the reader should be able to point at what they are choosing between. A separate labeled box per option, with nothing connecting them to the system, is not a comparison; it is a restated option list. **Match complexity to the stakes.** A one-hop question is a three-box diagram; a migration that reroutes writes through a queue needs the queue, the writer, the reader, and the ordering arrow. Draw as much as the decision actually turns on - no forced minimalism, no inventory of the whole system either. **Label the arrows.** An unlabeled arrow is "related somehow"; `writes`, `inval...

Details

Author
asgeirtj
Repository
asgeirtj/system_prompts_leaks
Created
1 years ago
Last Updated
yesterday
Language
JavaScript
License
CC0-1.0

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

diagram-design

Design editorial-quality diagrams as self-contained inline SVG — architecture diagrams, flows, sequences, state machines, data models, timelines, layer stacks, quadrants, comparisons, and system maps. Use when explaining how a system is arranged, how a process moves, how components depend on each other, or how options compare; when a Mermaid or draw.io diagram needs to be converted into a document's design system; or when an existing diagram looks auto-generated and needs editorial judgment. Do not use for quantitative charts of measured data (use chart-design), for the surrounding report structure (use analytical-document-design), for UI mockups or wireframes, or for producing editable .drawio files.

2 Updated 2 weeks ago
Avinava
Data & Documents Listed

diagram

Draws a diagram that explains how something works, in the library the user names — Mermaid by default, otherwise Graphviz, D2 or PlantUML. One question per diagram, at most ten nodes, every branch labelled, and anything bigger split into an overview plus linked detail diagrams instead of one unreadable wall. Use when the user says "/diagram", "draw this", "diagram this flow", "show me how this works", "flowchart", "sequence diagram", "state machine", "architecture diagram", "visualise this process", or the Turkish equivalents "diyagram ciz", "akis semasi", "sema ciz", "gorsellestir". For measuring data use report, for judging code use audit, for charts of numbers use dataviz.

0 Updated today
olcayseygan
Data & Documents Listed

svg-diagrams

Author SVG diagrams that survive print. Token-driven, legible in greyscale, and checked mechanically. Use when a chapter, article, or document needs a flow, architecture stack, node map, pipeline, cycle, or annotated artifact.

0 Updated 1 months ago
swiftugandan