Skip to content

Commit

Permalink
feat(1624): first draft, prototype of context map grammar and diagram
Browse files Browse the repository at this point in the history
  • Loading branch information
@AngeloChecked
AngeloChecked committed Jul 20, 2024
1 parent 3c3d28d commit 8613b08
Show file tree
Hide file tree
Showing 27 changed files with 1,918 additions and 95 deletions.
1 change: 1 addition & 0 deletions .build/jsonSchema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
'xyChart',
'requirement',
'mindmap',
'contextMap',
'timeline',
'gitGraph',
'c4',
Expand Down
68 changes: 68 additions & 0 deletions demos/contextMap.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!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">
context-map-beta

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">
context-map-beta

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.initialize({
theme: 'base',
logLevel: 0,
useMaxWidth: false,
});
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
</script>
</body>
</html>
187 changes: 94 additions & 93 deletions demos/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,94 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid 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>Mermaid quick test and demo pages</h1>
<p>
Some of these pages have duplicates; some are slow to load because they have so many graphs.
</p>
<p>You can test custom code in the <a href="./dev/example.html">development page</a>.</p>
<p>
If you'd like to clean up one of the pages, please feel free to
<a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
</p>

<ul>
<li>
<h2><a href="./c4context.html">C4 Context</a></h2>
</li>
<li>
<h2><a href="./classchart.html">Class diagrams</a></h2>
</li>
<li>
<h2><a href="./dataflowchart.html">Data flow charts</a></h2>
</li>
<li>
<h2><a href="./er.html">Entity Relation diagram</a></h2>
</li>
<li>
<h2><a href="./flowchart.html">Flow charts</a></h2>
</li>
<li>
<h2><a href="./gantt.html">Gantt</a></h2>
</li>
<li>
<h2><a href="./git.html">Git</a></h2>
</li>
<li>
<h2><a href="./info.html">Info</a></h2>
</li>
<li>
<h2><a href="./journey.html">Journey</a></h2>
</li>
<li>
<h2><a href="./mindmap.html">Mindmap</a></h2>
</li>
<li>
<h2><a href="./pie.html">Pie</a></h2>
</li>
<li>
<h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
</li>
<li>
<h2><a href="./xychart.html">XY charts</a></h2>
</li>
<li>
<h2><a href="./requirements.html">Requirements</a></h2>
</li>
<li>
<h2><a href="./sequence.html">Sequence</a></h2>
</li>
<li>
<h2><a href="./state.html">State</a></h2>
</li>
<li>
<h2><a href="./timeline.html">Timeline</a></h2>
</li>
<li>
<h2><a href="./zenuml.html">ZenUML</a></h2>
</li>
<li>
<h2><a href="./sankey.html">Sankey</a></h2>
</li>
<li>
<h2><a href="./packet.html">Packet</a></h2>
</li>
<li>
<h2><a href="./block.html">Layered Blocks</a></h2>
</li>
</ul>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid 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>Mermaid quick test and demo pages</h1>
<p>
Some of these pages have duplicates; some are slow to load because they have so many graphs.
</p>
<p>You can test custom code in the <a href="./dev/example.html">development page</a>.</p>
<p>
If you'd like to clean up one of the pages, please feel free to
<a href="https://github.com/mermaid-js/mermaid/pulls">submit a pull request (PR).</a>
</p>

<ul>
<li>
<h2><a href="./c4context.html">C4 Context</a></h2>
</li>
<li>
<h2><a href="./classchart.html">Class diagrams</a></h2>
</li>
<li>
<h2><a href="./dataflowchart.html">Data flow charts</a></h2>
</li>
<li>
<h2><a href="./er.html">Entity Relation diagram</a></h2>
</li>
<li>
<h2><a href="./flowchart.html">Flow charts</a></h2>
</li>
<li>
<h2><a href="./gantt.html">Gantt</a></h2>
</li>
<li>
<h2><a href="./git.html">Git</a></h2>
</li>
<li>
<h2><a href="./info.html">Info</a></h2>
</li>
<li>
<h2><a href="./journey.html">Journey</a></h2>
</li>
<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>
<h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
</li>
<li>
<h2><a href="./xychart.html">XY charts</a></h2>
</li>
<li>
<h2><a href="./requirements.html">Requirements</a></h2>
</li>
<li>
<h2><a href="./sequence.html">Sequence</a></h2>
</li>
<li>
<h2><a href="./state.html">State</a></h2>
</li>
<li>
<h2><a href="./timeline.html">Timeline</a></h2>
</li>
<li>
<h2><a href="./zenuml.html">ZenUML</a></h2>
</li>
<li>
<h2><a href="./sankey.html">Sankey</a></h2>
</li>
<li>
<h2><a href="./packet.html">Packet</a></h2>
</li>
<li>
<h2><a href="./block.html">Layered Blocks</a></h2>
</li>
</ul>
</body>
</html>
1 change: 1 addition & 0 deletions packages/mermaid/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"class diagram",
"git graph",
"mindmap",
"context map language",
"packet diagram",
"c4 diagram",
"er diagram",
Expand Down
36 changes: 36 additions & 0 deletions packages/mermaid/src/config.type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ export interface MermaidConfig {
xyChart?: XYChartConfig;
requirement?: RequirementDiagramConfig;
mindmap?: MindmapDiagramConfig;
contextMap?: ContextMapLanguageDiagramConfig;
gitGraph?: GitGraphDiagramConfig;
c4?: C4DiagramConfig;
sankey?: SankeyDiagramConfig;
Expand Down Expand Up @@ -972,6 +973,41 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
padding?: number;
maxNodeWidth?: number;
}
/**
* The object containing configurations specific for context map language diagrams
*
* This interface was referenced by `MermaidConfig`'s JSON-Schema
* via the `definition` "ContextMapDiagramConfig".
*/
export interface ContextMapLanguageDiagramConfig 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` "GitGraphDiagramConfig".
Expand Down
5 changes: 5 additions & 0 deletions packages/mermaid/src/defaultConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ const config: RequiredDeep<MermaidConfig> = {
tickInterval: undefined,
useWidth: undefined, // can probably be removed since `configKeys` already includes this
},
contextMap: {
...defaultConfigJson.contextMap,
useWidth: undefined,
useMaxWidth: false,
},
c4: {
...defaultConfigJson.c4,
useWidth: undefined,
Expand Down
1 change: 1 addition & 0 deletions packages/mermaid/src/diagram-api/diagram-orchestration.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ describe('diagram-orchestration', () => {
{ text: 'info', expected: 'info' },
{ text: 'sequenceDiagram', expected: 'sequence' },
{ text: 'mindmap', expected: 'mindmap' },
{ text: 'context-map-beta', expected: 'context-map-beta' },
{ text: 'timeline', expected: 'timeline' },
{ text: 'gitGraph', expected: 'gitGraph' },
{ text: 'stateDiagram', expected: 'state' },
Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/diagram-api/diagram-orchestration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import git from '../diagrams/git/gitGraphDetector.js';
import gantt from '../diagrams/gantt/ganttDetector.js';
import { info } from '../diagrams/info/infoDetector.js';
import { pie } from '../diagrams/pie/pieDetector.js';
import { contextMap } from '../diagrams/context-map/contextMapDetector.js';
import quadrantChart from '../diagrams/quadrant-chart/quadrantDetector.js';
import xychart from '../diagrams/xychart/xychartDetector.js';
import requirement from '../diagrams/requirement/requirementDetector.js';
Expand Down Expand Up @@ -81,6 +82,7 @@ export const addDiagrams = () => {
flowchartV2,
flowchart,
mindmap,
contextMap,
timeline,
git,
stateV2,
Expand Down
Loading

0 comments on commit 8613b08

Please sign in to comment.