feat(1624): first draft, prototype of context map grammar and diagram

mermaid-js · Mar 2, 2024 · 70cd285 · 70cd285
1 parent 2ac4e08
commit 70cd285
Show file tree

Hide file tree

Showing 21 changed files with 1,579 additions and 1 deletion.
diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts
@@ -21,6 +21,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'xyChart',
   'requirement',
   'mindmap',
+  'contextMap',
   'timeline',
   'gitGraph',
   'c4',

diff --git a/demos/contextMap.html b/demos/contextMap.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Context Map Language Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Context Map demo</h1>
+    <pre class="mermaid">
+    ContextMap DDDSampleMap {
+      contains CargoBookingContext
+      contains VoyagePlanningContext
+      contains LocationContext
+
+      CargoBookingContext [SK]<->[SK] VoyagePlanningContext
+      CargoBookingContext [D]<-[U,OHS,PL] LocationContext
+      VoyagePlanningContext [D]<-[U,OHS,PL] LocationContext
+    }
+   </pre
+    >
+
+    <pre class="mermaid">
+  ContextMap InsuranceContextMap {
+    contains CustomerManagementContext 
+    contains CustomerSelfServiceContext 
+    contains PrintingContext
+    contains PolicyManagementContext 
+    contains RiskManagementContext 
+    contains DebtCollection
+
+    CustomerSelfServiceContext [D,C]<-[U,S] CustomerManagementContext 
+    CustomerManagementContext [D,ACL]<-[U,OHS,PL] PrintingContext 
+    PrintingContext [U,OHS,PL]->[D,ACL] PolicyManagementContext 
+    RiskManagementContext [P]<->[P] PolicyManagementContext 
+    PolicyManagementContext [D,CF]<-[U,OHS,PL] CustomerManagementContext 
+    DebtCollection [D,ACL]<-[U,OHS,PL] PrintingContext 
+    PolicyManagementContext [SK]<->[SK] DebtCollection 
+  }
+
+
+   </pre
+    >
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'base',
+        startOnLoad: true,
+        logLevel: 0,
+        useMaxWidth: false,
+      });
+      function callback() {
+        alert('It worked');
+      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+    </script>
+  </body>
+</html>
diff --git a/demos/index.html b/demos/index.html
@@ -54,6 +54,9 @@ <h2><a href="./journey.html">Journey</a></h2>
       <li>
         <h2><a href="./mindmap.html">Mindmap</a></h2>
       </li>
+      <li>
+        <h2><a href="./contextMap.html">Context Map</a></h2>
+      </li>
       <li>
         <h2><a href="./pie.html">Pie</a></h2>
       </li>

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272)
+[defaultConfig.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L276)
 
 ---
 

diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -50,6 +50,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'xyChart',
   'requirement',
   'mindmap',
+  'contextMap',
   'timeline',
   'gitGraph',
   'c4',

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -166,6 +166,7 @@ export interface MermaidConfig {
   xyChart?: XYChartConfig;
   requirement?: RequirementDiagramConfig;
   mindmap?: MindmapDiagramConfig;
+  contextMap?: MiniContextMapLanguageDiagramConfig;
   gitGraph?: GitGraphDiagramConfig;
   c4?: C4DiagramConfig;
   sankey?: SankeyDiagramConfig;
@@ -639,6 +640,41 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
   padding?: number;
   maxNodeWidth?: number;
 }
+/**
+ * The object containing configurations specific for mini context map language diagrams
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "MiniContextMapLanguageDiagramConfig".
+ */
+export interface MiniContextMapLanguageDiagramConfig extends BaseDiagramConfig {
+  width?: number;
+  height?: number;
+  nodeMargin?: ContextMapNodeMargin;
+  nodePadding?: ContextMapNodePadding;
+  font?: ContextMapFont;
+}
+/**
+ * margins of nodes
+ */
+export interface ContextMapNodeMargin {
+  horizontal?: number;
+  vertical?: number;
+}
+/**
+ * padding of nodes
+ */
+export interface ContextMapNodePadding {
+  horizontal?: number;
+  vertical?: number;
+}
+/**
+ * Font of all Context Map texts
+ */
+export interface ContextMapFont {
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: number;
+}
 /**
  * This interface was referenced by `MermaidConfig`'s JSON-Schema
  * via the `definition` "PieDiagramConfig".

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
@@ -257,6 +257,10 @@ const config: RequiredDeep<MermaidConfig> = {
     // TODO: can we make this default to `true` instead?
     useMaxWidth: false,
   },
+  contextMap: {
+    ...defaultConfigJson.contextMap,
+    useMaxWidth: false,
+  },
 };
 
 const keyify = (obj: any, prefix = ''): string[] =>

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
@@ -31,6 +31,7 @@ describe('diagram-orchestration', () => {
       { text: 'info', expected: 'info' },
       { text: 'sequenceDiagram', expected: 'sequence' },
       { text: 'mindmap', expected: 'mindmap' },
+      { text: 'ContextMap', expected: 'contextMap' },
       { text: 'timeline', expected: 'timeline' },
       { text: 'gitGraph', expected: 'gitGraph' },
       { text: 'stateDiagram', expected: 'state' },

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -19,6 +19,7 @@ import errorDiagram from '../diagrams/error/errorDiagram.js';
 import flowchartElk from '../diagrams/flowchart/elk/detector.js';
 import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
+import contextMap from '../diagrams/context-map/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
 import block from '../diagrams/block/blockDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
@@ -81,6 +82,7 @@ export const addDiagrams = () => {
     flowchartV2,
     flowchart,
     mindmap,
+    contextMap,
     timeline,
     git,
     stateV2,

diff --git a/packages/mermaid/src/diagrams/context-map/contextMap-definition.ts b/packages/mermaid/src/diagrams/context-map/contextMap-definition.ts
@@ -0,0 +1,11 @@
+// @ts-ignore: JISON doesn't support types
+import contextMapParser from './parser/contextMap.jison';
+import * as contextMapDb from './contextMapDb.js';
+import contextMapRenderer from './contextMapRenderer.js';
+
+export const diagram = {
+  db: contextMapDb,
+  renderer: contextMapRenderer,
+  parser: contextMapParser,
+  styles: undefined,
+};
diff --git a/packages/mermaid/src/diagrams/context-map/contextMap.spec.ts b/packages/mermaid/src/diagrams/context-map/contextMap.spec.ts
@@ -0,0 +1,116 @@
+import { describe, test, expect } from 'vitest';
+import type { Link, RawLink } from './contextMap.js';
+import { mapEdgeLabels } from './contextMap.js';
+
+describe('graph construction', () => {
+  test.each([
+    {
+      rawLink: {
+        source: { id: 'CargoBookingContext', type: ['SK'] },
+        target: {
+          id: 'VoyagePlanningContextVoyagePlanningContextVoyagePlanningContext',
+          type: ['SK'],
+        },
+        arrow: ['left', 'right'],
+      },
+      link: {
+        source: { id: 'CargoBookingContext', boxText: undefined, bodyText: undefined },
+        target: {
+          id: 'VoyagePlanningContextVoyagePlanningContextVoyagePlanningContext',
+          boxText: undefined,
+          bodyText: undefined,
+        },
+        middleText: 'Shared Kernel',
+      },
+    },
+    {
+      rawLink: {
+        source: { id: 'CustomerSelfServiceContext', type: ['D', 'C'] },
+        target: { id: 'CustomerManagementContext', type: ['U', 'S'] },
+        arrow: ['right'],
+      },
+      link: {
+        source: { id: 'CustomerSelfServiceContext', boxText: 'D', bodyText: undefined },
+        target: { id: 'CustomerManagementContext', boxText: 'U', bodyText: undefined },
+        middleText: 'Customer/Supplier',
+      },
+    },
+    {
+      rawLink: {
+        source: { id: 'CustomerManagementContext', type: ['D', 'ACL'] },
+        target: { id: 'PrintingContext', type: ['U', 'OHS', 'PL'] },
+        arrow: ['right'],
+      },
+      link: {
+        source: { id: 'CustomerManagementContext', boxText: 'D', bodyText: 'ACL' },
+        target: { id: 'PrintingContext', boxText: 'U', bodyText: 'OHS, PL' },
+        middleText: undefined,
+      },
+    },
+    {
+      rawLink: {
+        source: { id: 'PrintingContext', type: ['U', 'OHS', 'PL'] },
+        target: { id: 'PolicyManagementContext', type: ['D', 'ACL'] },
+        arrow: ['right'],
+      },
+      link: {
+        source: { id: 'PrintingContext', boxText: 'U', bodyText: 'OHS, PL' },
+        target: { id: 'PolicyManagementContext', boxText: 'D', bodyText: 'ACL' },
+        middleText: undefined,
+      },
+    },
+    {
+      rawLink: {
+        source: { id: 'RiskManagementContext', type: ['P'] },
+        target: { id: 'PolicyManagementContext', type: ['P'] },
+        arrow: ['left', 'right'],
+      },
+      link: {
+        source: { id: 'RiskManagementContext', boxText: undefined, bodyText: undefined },
+        target: { id: 'PolicyManagementContext', boxText: undefined, bodyText: undefined },
+        middleText: 'Partnership',
+      },
+    },
+    {
+      rawLink: {
+        source: { id: 'PolicyManagementContext', type: ['D', 'CF'] },
+        target: { id: 'CustomerManagementContext', type: ['U', 'OHS', 'PL'] },
+        arrow: ['right'],
+      },
+      link: {
+        source: { id: 'PolicyManagementContext', boxText: 'D', bodyText: 'CF' },
+        target: { id: 'CustomerManagementContext', boxText: 'U', bodyText: 'OHS, PL' },
+        middleText: undefined,
+      },
+    },
+    {
+      rawLink: {
+        source: { id: 'DebtCollection', type: ['D', 'ACL'] },
+        target: { id: 'PrintingContext', type: ['U', 'OHS', 'PL'] },
+        arrow: ['right'],
+      },
+      link: {
+        source: { id: 'DebtCollection', boxText: 'D', bodyText: 'ACL' },
+        target: { id: 'PrintingContext', boxText: 'U', bodyText: 'OHS, PL' },
+        middleText: undefined,
+      },
+    },
+    {
+      rawLink: {
+        source: { id: 'CustomersBackofficeTeam', type: ['U', 'S'] },
+        target: { id: 'CustomersFrontofficeTeam', type: ['D', 'C'] },
+        arrow: ['right'],
+      },
+      link: {
+        source: { id: 'CustomersBackofficeTeam', boxText: 'U', bodyText: undefined },
+        target: { id: 'CustomersFrontofficeTeam', boxText: 'D', bodyText: undefined },
+        middleText: 'Customer/Supplier',
+      },
+    },
+  ] as { rawLink: RawLink; link: Link }[])(
+    'map labels for source: $rawLink.source.type, and target: $rawLink.target.type',
+    ({ rawLink, link }: { rawLink: RawLink; link: Link }) => {
+      expect(mapEdgeLabels(rawLink)).toStrictEqual(link);
+    }
+  );
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,6 +54,9 @@ <h2><a href="./journey.html">Journey</a></h2> @@
           <li>
             <h2><a href="./mindmap.html">Mindmap</a></h2>
           </li>
+          <li>
+            <h2><a href="./contextMap.html">Context Map</a></h2>
+          </li>
           <li>
             <h2><a href="./pie.html">Pie</a></h2>
           </li>
@@ Expand Down @@