mermaid-js · AngeloChecked · Mar 2, 2024 · Mar 3, 2024
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 @@
  'xyChart',
  'requirement',
  'mindmap',
+ 'contextMap',
  'timeline',
  'gitGraph',
  'c4',
@@ -120,7 +121,7 @@
 * @param schema - The input schema.
 * @returns The schema with `allOf` replaced with `extends`.
 */
 function replaceAllOfWithExtends(schema: JSONSchemaType<Record<string, any>>) {
 if (schema['allOf']) {
 const { allOf, ...schemaWithoutAllOf } = schema;
 return {
@@ -144,7 +145,7 @@
 * @param schema - The input schema.
 * @returns The schema with all required values removed.
 */
 function removeRequired(schema: JSONSchemaType<Record<string, any>>) {
 return { ...schema, required: [] };
 }


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);
+ }
+ );
+});