@zombie-mermaid/core 3.1.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/core",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "license": "MIT",
   "description": "Shared types, theme, and text/statement utilities used by every zombie-mermaid renderer.",
   "repository": {

package/src/__tests__/diagram-type.test.ts

@@ -10,6 +10,44 @@ describe('detectDiagramType', () => {
     expect(detectDiagramType('xychart-beta\nx-axis [a, b]')).toBe('xychart')
   })
 
+  it('detects architecture diagrams under both header spellings', () => {
+    expect(detectDiagramType('architecture-beta\nservice a')).toBe(
+      'architecture',
+    )
+    expect(detectDiagramType('architecture\nservice a')).toBe('architecture')
+    expect(detectDiagramType('Architecture-Beta\nservice a')).toBe(
+      'architecture',
+    )
+    expect(detectDiagramType('architecture-beta;service a')).toBe(
+      'architecture',
+    )
+  })
+
+  it('does not match an architecture header with an unsupported suffix', () => {
+    expect(detectDiagramType('architecture-foo\nservice a')).toBe('flowchart')
+    expect(detectDiagramType('architecture-beta TB\nservice a')).toBe(
+      'flowchart',
+    )
+  })
+
+  it('detects every C4 variant header, case-insensitively', () => {
+    for (const header of [
+      'C4Context',
+      'C4Container',
+      'C4Component',
+      'C4Dynamic',
+      'C4Deployment',
+      'c4context',
+    ]) {
+      expect(detectDiagramType(`${header}\nPerson(a, "A")`)).toBe('c4')
+    }
+    expect(detectDiagramType('C4Context;Person(a, "A")')).toBe('c4')
+  })
+
+  it('does not match an unknown C4 variant', () => {
+    expect(detectDiagramType('C4Foo\nPerson(a, "A")')).toBe('flowchart')
+  })
+
   it('isolates the header on a semicolon-separated single line', () => {
     expect(detectDiagramType('sequenceDiagram;A->>B: Hi')).toBe('sequence')
     expect(detectDiagramType('classDiagram;class Foo')).toBe('class')

package/src/diagram-type.ts

@@ -22,6 +22,9 @@ export const DIAGRAM_TYPES = [
   'class',
   'er',
   'xychart',
+  'architecture',
+
+  'c4',
 ] as const
 
 /** The diagram types this library can detect and route to a renderer. */
@@ -40,6 +43,12 @@ export function detectDiagramType(text: string): DiagramType {
   const firstLine = splitStatements(text)[0]?.text.toLowerCase() ?? ''
 
   if (/^xychart(?:-beta)?(?:\s|$)/.test(firstLine)) return 'xychart'
+  if (/^architecture(?:-beta)?\s*$/.test(firstLine)) return 'architecture'
+
+  if (
+    /^c4(?:context|container|component|dynamic|deployment)\s*$/.test(firstLine)
+  )
+    return 'c4'
   if (/^sequencediagram\s*$/.test(firstLine)) return 'sequence'
   if (/^classdiagram\s*$/.test(firstLine)) return 'class'
   if (/^erdiagram\s*$/.test(firstLine)) return 'er'

package/src/style-directives.ts

@@ -68,6 +68,9 @@ export function tryApplyClassDef(
 /**
  * `class A,B className` — attach a style class to one or more nodes.
  *
+ * Whitespace around commas is allowed (`class A, B foo`) — the state-diagram
+ * docs show that form (`class Moving, Crash movement`).
+ *
  * Allows an optional trailing semicolon (`class A,B foo;`) — Mermaid treats
  * it as valid/optional, and `classDef`/`style` already tolerate it via their
  * `(.+)$` capture. Without this, the semicolon form fails to match here and
@@ -79,7 +82,9 @@ export function tryApplyClassAssignment(
   line: string,
   target: StyleDirectives,
 ): boolean {
-  const match = line.match(/^class\s+([\w,-]+)\s+([\w-]+)\s*;?\s*$/)
+  const match = line.match(
+    /^class\s+([\w-]+(?:\s*,\s*[\w-]+)*)\s+([\w-]+)\s*;?\s*$/,
+  )
   if (!match) return false
   const className = match[2]!
   for (const id of match[1]!.split(',')) {