Menu
How to add or restyle a D3 diagram in the playbook docs (MkDocs Material). Use for any flowchart, diagram, chart, or graphic in docs/.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Query or contribute to syv.ai's shared company brain — the private 1brain GitHub repo (kunder, tilbud, teknik, strategi, wiki) — from any session, regardless of the current directory. Bootstraps a local clone when needed. Use when the user asks what syv.ai knows about a client or topic ("hvad ved vi om Krifa?", "har vi løst noget lignende før?"), wants something added to the brain ("tilføj til hjernen", mødenoter, læringer, nye dokumenter), or mentions 1brain or hjernen. All brain content is in Danish.
Write a syv.ai client proposal (tilbud, forslag, offer, PoC-beskrivelse, bud på udbud) in the company's fixed format and style, and render it as a branded PDF. Works from any session — bootstraps the private 1brain repo where the full proposal skill, templates and Typst PDF pipeline live. Trigger on opgavebeskrivelser, kravspecifikationer, SKI-udbud, RFPs and "lav et tilbud til …", also when the word "tilbud" isn't used directly.
Interviews the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when the user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
Zooms out to give broader context or a higher-level perspective on a section of code. Use when you're unfamiliar with an area of code or need to understand how it fits into the bigger picture.
Use when a plan is multi-file, architecture-heavy, data-heavy, UI-heavy, ambiguous, or risky enough that the wrong direction would be expensive to undo. Renders the plan as a single self-contained HTML review surface — diagrams, file maps, annotated code, open questions — opened in the browser, with decisions captured in the terminal.
Use when you have a written implementation plan to execute in a separate session with review checkpoints
| name | add-visual |
| description | How to add or restyle a D3 diagram in the playbook docs (MkDocs Material). Use for any flowchart, diagram, chart, or graphic in docs/. |
All diagrams are custom D3 (no Mermaid). Renderers + shared theme live in docs/javascripts/visuals/, registered in mkdocs.yml under extra_javascript:
theme.js — global window.VIZ (colors, spacing, fonts, arrowhead factory). Loads first.flow-diagram.js — linear pill/rounded node flows. data-orientation LR | TD.graph-diagram.js — branching/looping flows with edge labels + decision nodes. Layout via dagre (CDN). Node kind:"decision" → diamond; link label → edge label.quality-funnel.js — defense-in-depth funnel.Pick flow-diagram for a simple chain; graph-diagram when there are branches, loops, decisions, or edge labels.
One-offs → inline SVG in the .md. App-like interactives → a built <iframe> component.
<template>, not <script> — Material's instant navigation rewrites <script> tags and breaks the diagram on the second visit.window.VIZ in JS instead.Author in a page:
<div class="flow-diagram" data-orientation="TD">
<template>
{ "nodes": [ { "id": "a", "label": "Title", "sub": "optional subtitle" } ],
"links": [ { "source": "a", "target": "b", "dir": "both" } ] }
</template>
</div>
New renderer — copy an existing one; it must:
window.document$.subscribe(renderAll) — runs on load + every instant nav.svg first.window.VIZ (never hardcode).container.querySelector("template").content.textContent.mkdocs.yml after visuals/theme.js.Verify: mkdocs build --strict is clean and the <template> JSON is present in site/<page>/index.html. Don't headless-screenshot — ask the user to check, including navigate-away-and-back.
visuals/theme.js)#000, white borders/labels/lines, muted text #a1a1aa, violet accent, green good.VIZ.space.gap).defect (error accent) is tunable, not canonical — readable, not neon.width:100%), so the font is always the intended size. This is the rule that prevents the "stretched diagram → shrunk font" problem. Don't reintroduce width:100% / max-width scaling on the SVG.overflow-x:auto in extra.css); a narrower one centers.\n in its label to wrap it onto multiple lines (supported by graph-diagram).LR; use TD only when genuinely top-down.