@yassimba/pi-loom-mermaid 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yassimba/pi-loom-mermaid",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Loom's advanced Mermaid renderer for Pi, with better routing and color.",
   "license": "MIT",
   "type": "module",

package/src/index.ts

@@ -110,6 +110,6 @@ export function transformMermaidMarkdown(markdown: string, context: TransformCon
 export default function piLovelyMermaid(pi: ExtensionAPI): void {
   pi.registerMarkdownTransformer(transformMermaidMarkdown);
   pi.on("before_agent_start", (event) => ({
-    systemPrompt: `${event.systemPrompt}\n\nUse fenced \`mermaid\` blocks; they render automatically in the user’s session. Use Mermaid proactively to explain relationships, flows, and changes. Choose by subject: flowchart for dependencies/decisions, sequence for interactions, state for lifecycles, ER/class for models, mindmap for hierarchies, timeline/git graph for history, pie for proportions. Use complementary diagrams when explaining multiple aspects. Keep diagram labels short. Mark changes (like diff but also other changes) with: :::red removed, :::green added, :::orange changed. In general prefer colored outlines to logically group things (if there are no changes involved).`,
+    systemPrompt: `${event.systemPrompt}\n\nUse fenced \`mermaid\` blocks; they render automatically in the user’s session. Use Mermaid proactively to explain relationships, flows, and changes. Choose by subject: architecture for deployed services, flowchart for dependencies/decisions, sequence for interactions, state for lifecycles, ER/class for models, mindmap for hierarchies, timeline/git graph for history, pie for proportions. Use complementary diagrams when explaining multiple aspects. Keep diagram labels short. Mark changes (like diff but also other changes) with: :::red removed, :::green added, :::orange changed. In general prefer colored outlines to logically group things (if there are no changes involved).`,
   }));
 }

package/src/loom-mermaid/diagrams/architecture.ts

@@ -0,0 +1,116 @@
+/**
+ * `architecture-beta`: services and junctions inside nested groups.
+ *
+ * Architecture's cardinal ports choose exact SVG attachment points. The
+ * terminal graph router already chooses reachable box sides, so this parser
+ * preserves endpoints and arrowheads while leaving port placement to it.
+ */
+
+import { Graph, MAX_GROUP_DEPTH, MAX_GROUPS } from '../graph.ts'
+import { cleanLabel } from '../labels.ts'
+import { layoutFlowchart, layoutGrouped } from '../graph-render.ts'
+import type { Diagram } from '../registry.ts'
+import { firstWord, headerKind, statementsOf } from '../statements.ts'
+
+export const architecture: Diagram = {
+  kind: 'architecture',
+  headers: ['architecture-beta'],
+  render(src, limits) {
+    const graph = parseArchitecture(src)
+    if (graph === null) return null
+    const canvas = graph.groups.length === 0 ? layoutFlowchart(graph, limits) : layoutGrouped(graph, limits)
+    if (canvas === null) return null
+    return { canvas, warnings: graph.warnings, classDefs: {} }
+  },
+}
+
+const DECLARATION = /^(group|service)\s+([^\s()[\]:{}]+)\(([^)]*)\)\[([^\]]*)\](?:\s+in\s+([^\s]+))?$/i
+const JUNCTION = /^junction\s+([^\s:{}]+)(?:\s+in\s+([^\s]+))?$/i
+const EDGE = /^([^\s:{}]+)(?:\{group\})?:([TBLR])\s*(<)?--(>)?\s*([TBLR]):([^\s:{}]+)(?:\{group\})?$/i
+
+function parseArchitecture(src: string): Graph | null {
+  const statements = statementsOf(src)
+  if (headerKind(statements) !== 'architecture-beta') return null
+
+  // Architecture has no global direction. LR gives grouped boundary edges the
+  // existing router's more precise inner-node anchors.
+  const graph = new Graph('right')
+  const groupIndex = new Map<string, number>()
+
+  for (const st of statements.slice(1)) {
+    const declaration = st.match(DECLARATION)
+    const junction = st.match(JUNCTION)
+    const edge = st.match(EDGE)
+
+    if (declaration) {
+      const [, kind, id, , rawLabel, parentId] = declaration
+      const parent = parentId === undefined ? null : groupIndex.get(parentId)
+      if (parentId !== undefined && parent === undefined) {
+        graph.drop(st)
+      } else if (kind.toLowerCase() === 'group') {
+        if (groupIndex.has(id)) {
+          graph.drop(st)
+        } else if (
+          graph.groups.length >= MAX_GROUPS ||
+          groupDepth(graph, parent ?? null) >= MAX_GROUP_DEPTH
+        ) {
+          graph.truncated ??= `subgraph cap (${MAX_GROUPS} groups, depth ${MAX_GROUP_DEPTH}) reached`
+        } else {
+          groupIndex.set(id, graph.groups.length)
+          graph.groups.push({ id, label: cleanLabel(rawLabel) || id, parent: parent ?? null })
+        }
+      } else {
+        addNode(graph, id, cleanLabel(rawLabel) || id, parent ?? null, 'rect')
+      }
+    } else if (junction) {
+      const [, id, parentId] = junction
+      const parent = parentId === undefined ? null : groupIndex.get(parentId)
+      if (parentId !== undefined && parent === undefined) graph.drop(st)
+      else addNode(graph, id, '•', parent ?? null, 'round')
+    } else if (edge) {
+      const [, fromId, , leftArrow, rightArrow, , toId] = edge
+      const from = graph.index.get(fromId)
+      const to = graph.index.get(toId)
+      if (from === undefined || to === undefined) {
+        graph.drop(st)
+      } else {
+        graph.pushEdge({
+          from,
+          to,
+          label: null,
+          headFrom: leftArrow ? 'arrow' : 'none',
+          headTo: rightArrow ? 'arrow' : 'none',
+          line: 'solid',
+        })
+      }
+    } else if (firstWord(st).toLowerCase() !== 'title') {
+      graph.drop(st)
+    }
+
+    if (graph.truncated !== null) {
+      graph.warnings.push(`diagram truncated: ${graph.truncated}`)
+      break
+    }
+  }
+
+  return graph.nodes.length === 0 ? null : graph
+}
+
+function addNode(
+  graph: Graph,
+  id: string,
+  label: string,
+  group: number | null,
+  shape: 'rect' | 'round',
+): void {
+  const previous = graph.curGroup
+  graph.curGroup = group
+  graph.nodeIndex(id, label, shape)
+  graph.curGroup = previous
+}
+
+function groupDepth(graph: Graph, parent: number | null): number {
+  let depth = 0
+  for (let at = parent; at !== null; at = graph.groups[at].parent) depth++
+  return depth
+}

package/src/loom-mermaid/index.ts

@@ -14,9 +14,9 @@ export type { MermaidArt, Role, Span } from './types.ts'
 /**
  * Render a Mermaid source block as Unicode box-drawing art.
  *
- * Supported: `graph`/`flowchart` (including `subgraph`), `stateDiagram`,
- * `classDiagram`, `erDiagram`, `sequenceDiagram`, `pie`, `mindmap`,
- * `timeline` and `gitGraph`.
+ * Supported: `architecture-beta`, `graph`/`flowchart` (including `subgraph`),
+ * `stateDiagram`, `classDiagram`, `erDiagram`, `sequenceDiagram`, `pie`,
+ * `mindmap`, `timeline` and `gitGraph`.
  *
  * The diagram is laid out at whatever size it needs; `art.width` reports the
  * columns that turned out to be. Given `maxWidth`, a diagram wider than that

package/src/loom-mermaid/registry.ts

@@ -8,6 +8,7 @@
  */
 
 import type { Canvas } from './canvas.ts'
+import { architecture } from './diagrams/architecture.ts'
 import { classDiagram } from './diagrams/class.ts'
 import { er } from './diagrams/er.ts'
 import { flowchart } from './diagrams/flowchart.ts'
@@ -22,6 +23,7 @@ import { headerKind, statementsOf } from './statements.ts'
 
 /** A diagram type this renderer draws. */
 export type DiagramKind =
+  | 'architecture'
   | 'flowchart'
   | 'state'
   | 'class'
@@ -52,6 +54,7 @@ export interface Diagram {
 }
 
 const DIAGRAMS: Diagram[] = [
+  architecture,
   flowchart,
   state,
   classDiagram,