feat: add Cynefin framework diagram type

.build/jsonSchema.ts

@@ -32,6 +32,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'eventmodeling',
   'radar',
   'venn',
+  'cynefin',
 ] as const;
 
 /**

.changeset/add-cynefin-diagram.md

@@ -0,0 +1,24 @@
+---
+'mermaid': minor
+---
+
+Add Cynefin framework diagram type (beta)
+
+Adds the Cynefin framework as a new diagram type to Mermaid (available as `cynefin-beta`). The Cynefin framework, created by Dave Snowden, is a decision-making framework that categorizes problems into five complexity domains, widely used in agile, incident management, strategy, and organizational design.
+
+Features:
+
+- Five fixed domains in canonical layout: Complex, Complicated, Clear, Chaotic, and Confusion
+- Wavy organic boundaries between domains using deterministic SVG bezier curves
+- The "cliff" between Clear and Chaotic (catastrophic transition indicator)
+- Confusion/Disorder center ellipse overlay
+- Domain metadata including decision models (Probe/Sense/Respond etc.) and practice types
+- Items placed as text badges within each domain
+- Transition arrows between domains with optional labels
+- Full theme integration across all five mermaid themes
+- Schema-driven configuration: width, height, padding, showDomainDescriptions, boundaryAmplitude
+- Accessibility: ARIA roles, labels, descriptions
+
+This is the first text-based DSL for Cynefin diagrams in any diagramming tool.
+
+Implementation includes Langium grammar, modular renderer, unit tests, integration tests, Cypress e2e tests, and comprehensive documentation.

.cspell/mermaid-terms.txt

@@ -7,6 +7,7 @@ catmull
 compositTitleSize
 cose
 curv
+cynefin
 deaccelerator
 Deaccelerator
 deaccelerators

cypress/integration/rendering/cynefin/cynefin.spec.js

@@ -0,0 +1,208 @@
+import { imgSnapshotTest } from '../../../helpers/util';
+
+describe('cynefin framework', () => {
+  it('should render a simple cynefin diagram with all five domains', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        title Incident Response
+
+        complex
+          "Investigate root cause"
+          "Run chaos experiment"
+
+        complicated
+          "Analyze performance data"
+          "Expert review needed"
+
+        clear
+          "Restart service"
+          "Apply known fix"
+
+        chaotic
+          "Page on-call immediately"
+
+        confusion
+          "Unknown failure mode"
+      `
+    );
+  });
+
+  it('should render a cynefin diagram with transitions', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        title Strategy Categorization
+
+        complex
+          "Market research"
+
+        complicated
+          "Competitive analysis"
+
+        clear
+          "Standard pricing"
+
+        chaotic
+          "Crisis management"
+
+        complex --> complicated : "Pattern identified"
+        complicated --> clear : "Best practice codified"
+        clear --> chaotic : "Complacency"
+        chaotic --> complex : "Stabilized"
+      `
+    );
+  });
+
+  it('should render an empty cynefin framework', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        title Empty Framework
+
+        complex
+        complicated
+        clear
+        chaotic
+      `
+    );
+  });
+
+  it('should render cynefin with many items per domain', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        title Software Delivery
+
+        complex
+          "New product discovery"
+          "User behavior analysis"
+          "A/B testing strategy"
+
+        complicated
+          "Performance optimization"
+          "Security audit"
+          "Database migration"
+
+        clear
+          "Deploy to staging"
+          "Run test suite"
+          "Merge pull request"
+
+        chaotic
+          "Production outage"
+          "Data breach response"
+      `
+    );
+  });
+
+  it('should render cynefin with config override', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        complex
+          "Adaptive work"
+        clear
+          "Standard work"
+      `,
+      { cynefin: { width: 1000, height: 700, boundaryAmplitude: 15 } }
+    );
+  });
+
+  it('should render cynefin without domain descriptions', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        title Minimal Labels
+
+        complex
+          "Item A"
+        clear
+          "Item B"
+      `,
+      { cynefin: { showDomainDescriptions: false } }
+    );
+  });
+
+  it('should render cynefin with theme override', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        complex
+          "Test item"
+        clear
+          "Standard"
+      `,
+      {
+        theme: 'base',
+        themeVariables: {
+          cynefin: {
+            complexBg: '#FFE4B5',
+            clearBg: '#E6E6FA',
+            boundaryColor: '#FF0000',
+          },
+        },
+      }
+    );
+  });
+
+  it('should render cynefin with straight boundaries when amplitude is zero', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        title Straight Boundaries
+
+        complex
+          "Item A"
+        complicated
+          "Item B"
+        clear
+          "Item C"
+        chaotic
+          "Item D"
+      `,
+      { cynefin: { boundaryAmplitude: 0 } }
+    );
+  });
+
+  it('should render cynefin with confusion domain items without overflow', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        title Confusion Items
+
+        confusion
+          "Unknown A"
+          "Unknown B"
+          "Unknown C"
+          "Unknown D"
+          "Unknown E"
+      `
+    );
+  });
+
+  it('should render cynefin with self-loop transitions silently dropped', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        title Self-loop Handling
+
+        complex
+          "Emergent work"
+        complicated
+          "Expert work"
+
+        complex --> complicated : "Pattern found"
+        complex --> complex : "Self-loop (dropped)"
+      `
+    );
+  });
+
+  it('should render cynefin with accessibility directives', () => {
+    imgSnapshotTest(
+      `cynefin-beta
+        accTitle: Cynefin framework for software delivery
+        accDescr: A Cynefin map categorizing software tasks by complexity domain
+
+        complex
+          "Feature discovery"
+        complicated
+          "Refactoring"
+        clear
+          "Hotfix"
+        chaotic
+          "Incident"
+      `
+    );
+  });
+});

docs/config/setup/defaultConfig/variables/configKeys.md

@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:311](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L311)
+Defined in: [packages/mermaid/src/defaultConfig.ts:314](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L314)

docs/config/setup/mermaid/interfaces/MermaidConfig.md

@@ -65,6 +65,14 @@ Defined in: [packages/mermaid/src/config.type.ts:224](https://github.com/mermaid
 
 ---
 
+### cynefin?
+
+> `optional` **cynefin**: `CynefinDiagramConfig`
+
+Defined in: [packages/mermaid/src/config.type.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L245)
+
+---
+
 ### darkMode?
 
 > `optional` **darkMode**: `boolean`
@@ -105,7 +113,7 @@ You can set this attribute to base the seed on a static string.
 
 > `optional` **dompurifyConfig**: `Config`
 
-Defined in: [packages/mermaid/src/config.type.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L245)
+Defined in: [packages/mermaid/src/config.type.ts:246](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L246)
 
 ---
 
@@ -187,7 +195,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 > `optional` **fontSize**: `number`
 
-Defined in: [packages/mermaid/src/config.type.ts:247](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L247)
+Defined in: [packages/mermaid/src/config.type.ts:248](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L248)
 
 ---
 
@@ -313,7 +321,7 @@ Defines which main look to use for the diagram.
 
 > `optional` **markdownAutoWrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:248](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L248)
+Defined in: [packages/mermaid/src/config.type.ts:249](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L249)
 
 ---
 
@@ -445,7 +453,7 @@ Defined in: [packages/mermaid/src/config.type.ts:225](https://github.com/mermaid
 
 > `optional` **suppressErrorRendering**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L254)
+Defined in: [packages/mermaid/src/config.type.ts:255](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L255)
 
 Suppresses inserting 'Syntax error' diagram in the DOM.
 This is useful when you want to control how to handle syntax errors in your application.
@@ -515,7 +523,7 @@ Defined in: [packages/mermaid/src/config.type.ts:244](https://github.com/mermaid
 
 > `optional` **wrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:246](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L246)
+Defined in: [packages/mermaid/src/config.type.ts:247](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L247)
 
 ---