new-flowchart

new-flowchart

Scaffold a flowchart source file plus a Typst wrapper for printing.

Inputs to gather

1. Engine — mermaid (default) or d2.
   • mermaid is easier and more familiar; render via mmdc.
   • d2 produces nicer-looking diagrams; render via d2.
2. Title — for the diagram heading.
3. Slug — kebab-case stem.
4. Output directory — default flowcharts/.
5. Type — quick hint: decision-tree, troubleshooting, process, state-machine. Used to seed the starter content.

What to do

1. Create <output-dir>/<slug>.{mmd|d2} with starter content matching the chosen type. Example for decision-tree in Mermaid:

   flowchart TD
     start[Start: <situation>] --> q1{<first decision>}
     q1 -->|Yes| a1[<action>]
     q1 -->|No| q2{<next decision>}
     q2 -->|Yes| a2[<action>]
     q2 -->|No| stop[Stop / escalate]
   

2. Create <output-dir>/<slug>.typ — a small Typst wrapper that:

   • Renders the title
   • Embeds <slug>.svg (which compile will produce by running the diagram CLI)
   • Optionally adds a caption / source note

   #set page(paper: "a4", margin: 2cm)
   #align(center)[
     #text(size: 18pt, weight: "bold")[<TITLE>]
   ]
   #v(1em)
   #image("<slug>.svg", width: 100%)
   

3. Print both file paths and remind the user:

   • To preview the diagram source they can use VS Code's Mermaid preview, the d2 watcher, or the compile skill from this plugin.

Notes

• Don't try to render here — that's compile's job.
• If the user wants a flowchart inside an existing SOP rather than standalone, suggest editing the SOP's Typst source to #image("../flowcharts/<slug>.svg") directly instead of using a wrapper.