Write a fresh build script to <workspace>/.build/<slug>_build.py. Place
YOUR boxes on a grid as plain dicts, draw them however your design wants, and
import the connector helper so the arrows are correct (load_skill gave you
this skill's folder):
import sys, os
sys.path.insert(0, r"<skill-folder>/scripts")
from diagram_helpers import connect, marker_defs
BG="#14121c"; CARD="#211d33"; ACCENT="#7c5cff"; FG="#e9e0ff"
GREEN="#22c55e"; GREENBG="#0c3a22"; RED="#ef4444"; REDBG="#3f1c1c"; AMBER="#f59e0b"
start = {"x":300,"y":40, "w":200,"h":58}
creds = {"x":300,"y":170,"w":200,"h":58}
valid = {"x":300,"y":300,"w":170,"h":80,"shape":"diamond"}
ok = {"x":120,"y":460,"w":200,"h":58}
fail = {"x":480,"y":460,"w":200,"h":58}
def rect(b,label,stroke=ACCENT,fill=CARD):
return (f'<rect x="{b["x"]}" y="{b["y"]}" width="{b["w"]}" height="{b["h"]}" '
f'rx="13" fill="{fill}" stroke="{stroke}" stroke-width="2"/>'
f'<text x="{b["x"]+b["w"]/2}" y="{b["y"]+b["h"]/2+5}" fill="{FG}" '
f'font-family="Segoe UI,Arial" font-size="15" font-weight="600" '
f'text-anchor="middle">{label}</text>')
def diamond(b,label,stroke=AMBER,fill="#3a2a0a"):
cx,cy=b["x"]+b["w"]/2,b["y"]+b["h"]/2
pts=f'{cx},{b["y"]} {b["x"]+b["w"]},{cy} {cx},{b["y"]+b["h"]} {b["x"]},{cy}'
return (f'<polygon points="{pts}" fill="{fill}" stroke="{stroke}" stroke-width="2"/>'
f'<text x="{cx}" y="{cy+5}" fill="{FG}" font-family="Segoe UI,Arial" '
f'font-size="15" font-weight="600" text-anchor="middle">{label}</text>')
edges = (connect(start,creds) + connect(creds,valid)
+ connect(valid,ok, kind="success", label="Yes")
+ connect(valid,fail,kind="error", label="No")
+ connect(fail,creds,kind="error", label="retry"))
W,H=800,560
svg=(f'<svg width="{W}" height="{H}" viewBox="0 0 {W} {H}" '
f'xmlns="http://www.w3.org/2000/svg"><defs>{marker_defs()}</defs>'
f'<rect width="{W}" height="{H}" fill="{BG}"/>{edges}'
f'{rect(start,"Start")}{rect(creds,"Enter credentials")}{diamond(valid,"Valid?")}'
f'{rect(ok,"Login complete",GREEN,GREENBG)}{rect(fail,"Failure",RED,REDBG)}</svg>')
out=r"<workspace>/diagrams/<slug>.html"
os.makedirs(os.path.dirname(out),exist_ok=True)
open(out,"w",encoding="utf-8").write(
f'<!doctype html><meta charset="utf-8"><body style="margin:0;background:{BG};'
f'display:grid;place-items:center;min-height:100vh">{svg}</body>')
print(out)
connect(a,b,kind=,label=,lane_x=) figures out the route from the two boxes'
positions: b below a → down-elbow into its top; b above a (a loop) → out the
side and up a lane; b beside a → side-to-side. kind: normal/success/error.
