Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from
+1,943 −106
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8613b08
feat(1624): first draft, prototype of context map grammar and diagram
AngeloChecked Jul 20, 2024
cae456f
[autofix.ci] apply automated fixes
autofix-ci[bot] Jul 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .build/jsonSchema.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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>
30 changes: 20 additions & 10 deletions docs/config/setup/interfaces/mermaid.MermaidConfig.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ This matters if you are using base tag settings.

#### Defined in

[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162)
[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)

---

Expand All @@ -49,7 +49,7 @@ This matters if you are using base tag settings.

#### Defined in

[packages/mermaid/src/config.type.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L159)
[packages/mermaid/src/config.type.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L160)

---

Expand All @@ -63,6 +63,16 @@ This matters if you are using base tag settings.

---

### contextMap

• `Optional` **contextMap**: `ContextMapLanguageDiagramConfig`

#### Defined in

[packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)

---

### darkMode

• `Optional` **darkMode**: `boolean`
Expand Down Expand Up @@ -111,7 +121,7 @@ should not change unless content is changed.

#### Defined in

[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)

---

Expand Down Expand Up @@ -155,7 +165,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>

#### Defined in

[packages/mermaid/src/config.type.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L165)
[packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)

---

Expand Down Expand Up @@ -189,7 +199,7 @@ If set to true, ignores legacyMathML.

#### Defined in

[packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)
[packages/mermaid/src/config.type.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L159)

---

Expand Down Expand Up @@ -246,7 +256,7 @@ This option decides the amount of logging to be used by mermaid.

#### Defined in

[packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
[packages/mermaid/src/config.type.ts:167](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L167)

---

Expand Down Expand Up @@ -290,7 +300,7 @@ The maximum allowed size of the users text diagram

#### Defined in

[packages/mermaid/src/config.type.ts:161](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L161)
[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162)

---

Expand Down Expand Up @@ -330,7 +340,7 @@ The maximum allowed size of the users text diagram

#### Defined in

[packages/mermaid/src/config.type.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L160)
[packages/mermaid/src/config.type.ts:161](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L161)

---

Expand Down Expand Up @@ -401,7 +411,7 @@ This is useful when you want to control how to handle syntax errors in your appl

#### Defined in

[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
[packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)

---

Expand Down Expand Up @@ -454,7 +464,7 @@ You may also use `themeCSS` to override this value.

#### Defined in

[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)
[packages/mermaid/src/config.type.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L165)

---

Expand Down
2 changes: 1 addition & 1 deletion docs/config/setup/modules/defaultConfig.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

#### Defined in

[packages/mermaid/src/defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
[packages/mermaid/src/defaultConfig.ts:280](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L280)

---

Expand Down
1 change: 1 addition & 0 deletions packages/mermaid/package.json
View file
Open in desktop
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