flowss Architecture (this app)
Meta-template: how flowss itself is built. Demonstrates lock + bold + thickness.
Rendering…
Make it your own.
{
"nodes": [
{ "id":"u","type":"user","label":"Researcher","x":40,"y":220 },
{ "id":"app","type":"rounded","label":"flowss\n(Next.js)","x":210,"y":210,"bold":true,"fill":"#dbeafe" },
{ "id":"engines","type":"container","label":"110 rendering engines","x":420,"y":40,"w":400,"h":380,"locked":true },
{ "id":"mer","type":"rect","label":"Mermaid","x":460,"y":80,"fill":"#fce7f3" },
{ "id":"puml","type":"rect","label":"PlantUML","x":620,"y":80,"fill":"#dcfce7" },
{ "id":"gv","type":"rect","label":"Graphviz","x":460,"y":160,"fill":"#ede9fe" },
{ "id":"vl","type":"rect","label":"Vega-Lite","x":620,"y":160,"fill":"#fef3c7" },
{ "id":"pl","type":"rect","label":"Plotly","x":460,"y":240,"fill":"#dbeafe" },
{ "id":"lf","type":"rect","label":"Weave ★","x":620,"y":240,"fill":"#fef9c3","bold":true },
{ "id":"more","type":"note","label":"…and 11 more","x":540,"y":340 },
{ "id":"ai","type":"hexagon","label":"AI refine\n(Claude)","x":860,"y":180,"fill":"#fef3c7" },
{ "id":"tools","type":"rounded","label":"Diagram tools\n+ click-to-edit","x":210,"y":340,"bold":true,"fill":"#dcfce7" }
],
"edges": [
{ "id":"a","source":"u","target":"app","thickness":2 },
{ "id":"b","source":"app","target":"engines","thickness":2 },
{ "id":"c","source":"app","target":"ai","style":"dashed" },
{ "id":"d","source":"app","target":"tools" },
{ "id":"e","source":"tools","target":"engines","label":"edit","style":"dashed" }
]
}