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

feat: Add Venn diagram #5932

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

feat: Add Venn diagram #5932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
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 @@ -26,6 +26,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
'block',
'packet',
'architecture',
'venn',
] as const;

/**
Expand Down
3 changes: 3 additions & 0 deletions demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,9 @@ <h2><a href="./block.html">Layered Blocks</a></h2>
<li>
<h2><a href="./architecture.html">Architecture</a></h2>
</li>
<li>
<h2><a href="./venn.html">Venn diagram</a></h2>
</li>
</ul>
</body>
</html>
65 changes: 65 additions & 0 deletions demos/venn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!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: 'Courier New', Courier, monospace !important;
}
</style>
</head>

<body>
<h1>Venn diagram demo</h1>

<div class="diagrams">
<pre class="mermaid">
venn-beta
title Very Basic Venn Diagram
sets A
sets B
sets A,B label: AB
</pre>
<hr />
<pre class="mermaid">
venn-beta
title Three overlapping circles
sets A
sets B
sets C
sets A,B label: AB, background: skyblue
sets B,C label: BC, background: orange
sets A,C label: AC, background: lightgreen
sets A,B,C label: ABC, color: red, background: white
</pre>
<hr />
<pre class="mermaid">
venn-beta
title Three concatenated circles and one isolated circle
sets A size: 15, label: ALPHA
sets B size: 5, label: BETA
sets C size: 10
sets D size: 10, label: DELTA
sets A,B size: 1, label: AB, background: gold
sets B,D size: 1
</pre>
</div>
<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({
logLevel: 3,
securityLevel: 'loose',
});
</script>

<style>
pre {
/*width: 45vw;*/
/*padding: 2em;*/
}
</style>
</body>
</html>
20 changes: 15 additions & 5 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 @@ -121,7 +121,7 @@ should not change unless content is changed.

#### Defined in

[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)

---

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

#### Defined in

[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)

---

Expand Down Expand Up @@ -310,7 +310,7 @@ Defines which main look to use for the diagram.

#### Defined in

[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
[packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)

---

Expand Down Expand Up @@ -465,7 +465,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:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
[packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)

---

Expand Down Expand Up @@ -512,13 +512,23 @@ You may also use `themeCSS` to override this value.

---

### venn

• `Optional` **venn**: `VennDiagramConfig`

#### Defined in

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

---

### wrap

• `Optional` **wrap**: `boolean`

#### Defined in

[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)

---

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:267](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L267)
[packages/mermaid/src/defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270)

---

Expand Down
6 changes: 6 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,12 @@
"pnpm": {
"patchedDependencies": {
"roughjs": "patches/roughjs.patch"
},
"overrides": {
"fmin>json2module": "npm:[email protected]",
"fmin>rollup": "npm:[email protected]",
"fmin>tape": "npm:[email protected]",
"fmin>uglify-js": "npm:[email protected]"
}
}
}
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 @@ -72,6 +72,7 @@
"@mermaid-js/parser": "workspace:^",
"@types/d3": "^7.4.3",
"@types/dompurify": "^3.0.5",
"@upsetjs/venn.js": "^1.4.2",
"cytoscape": "^3.29.2",
"cytoscape-cose-bilkent": "^4.1.0",
"cytoscape-fcose": "^2.2.0",
Expand Down
10 changes: 10 additions & 0 deletions packages/mermaid/src/config.type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,7 @@ export interface MermaidConfig {
sankey?: SankeyDiagramConfig;
packet?: PacketDiagramConfig;
block?: BlockDiagramConfig;
venn?: VennDiagramConfig;
dompurifyConfig?: DOMPurifyConfiguration;
wrap?: boolean;
fontSize?: number;
Expand Down Expand Up @@ -1511,6 +1512,15 @@ export interface PacketDiagramConfig extends BaseDiagramConfig {
export interface BlockDiagramConfig extends BaseDiagramConfig {
padding?: number;
}
/**
* The object containing configurations specific for Venn diagrams.
*
* This interface was referenced by `MermaidConfig`'s JSON-Schema
* via the `definition` "VennDiagramConfig".
*/
export interface VennDiagramConfig extends BaseDiagramConfig {
padding?: number;
}
/**
* This interface was referenced by `MermaidConfig`'s JSON-Schema
* via the `definition` "FontConfig".
Expand Down
3 changes: 3 additions & 0 deletions packages/mermaid/src/defaultConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,9 @@ const config: RequiredDeep<MermaidConfig> = {
packet: {
...defaultConfigJson.packet,
},
venn: {
...defaultConfigJson.venn,
},
};

const keyify = (obj: any, prefix = ''): string[] =>
Expand Down
4 changes: 3 additions & 1 deletion packages/mermaid/src/diagram-api/diagram-orchestration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import sankey from '../diagrams/sankey/sankeyDetector.js';
import { packet } from '../diagrams/packet/detector.js';
import block from '../diagrams/block/blockDetector.js';
import architecture from '../diagrams/architecture/architectureDetector.js';
import venn from '../diagrams/venn/vennDetector.js';
import { registerLazyLoadedDiagrams } from './detectType.js';
import { registerDiagram } from './diagramAPI.js';

Expand Down Expand Up @@ -92,6 +93,7 @@ export const addDiagrams = () => {
packet,
xychart,
block,
architecture
architecture,
venn
);
};
72 changes: 72 additions & 0 deletions packages/mermaid/src/diagrams/venn/parser/venn.jison
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
%lex
%options case-insensitive

%x string
%x title
%%
\%\%(?!\{)[^\n]* /* skip comments */
[^\}]\%\%[^\n]* /* skip comments */
[\n\r]+ return 'NEWLINE';
\%\%[^\n]* /* do nothing */
\s+ /* skip */
<<EOF>> return 'EOF';

"title"\s[^#\n;]+ {return 'TITLE';}
"venn-beta" {return 'VENN';}
"sets" { return 'SETS'; }

[+-]?(?:\d+(?:\.\d+)?|\.\d+) { return 'NUMERIC'; }
[A-Za-z_][A-Za-z0-9\-_]* { return 'IDENTIFIER'; }
[^":,]+ { return "OPT_VALUE"; }

"," { return 'COMMA'; }
":" { return 'COLON'; }

/lex

%start start

%% /* language grammar */

start
: VENN document 'EOF' { return $2; }
;

document
: /* empty */ { $$ = [] }
| document line {$1.push($2);$$ = $1}
;

line
: SPACE statement { $$ = $2 }
| statement { $$ = $1 }
| NEWLINE { $$=[];}
| EOF { $$=[];}
;

statement
: TITLE {yy.setDiagramTitle( $1.substr(6));$$=$1.substr(6);}
| SETS identifierList { yy.addSubsetData($identifierList, undefined); }
| SETS identifierList stylesOpt { yy.addSubsetData($identifierList, $stylesOpt); }
;

stylesOpt
: styleField { $$ = [$styleField] }
| stylesOpt COMMA styleField { $$ = [...$stylesOpt, $styleField] }
;

styleField
: IDENTIFIER COLON IDENTIFIER { $$ = [$1, $3] }
| IDENTIFIER COLON OPT_VALUE { $$ = [$IDENTIFIER, $OPT_VALUE] }
| IDENTIFIER COLON NUMERIC { $$ = [$IDENTIFIER, $NUMERIC] }
;

text: STR
;

identifierList
: IDENTIFIER { $$ = [$IDENTIFIER] }
| identifierList COMMA IDENTIFIER { $$ = [...$identifierList, $IDENTIFIER] }
;

%%
66 changes: 66 additions & 0 deletions packages/mermaid/src/diagrams/venn/parser/venn.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
// @ts-ignore: jison doesn't export types
import venn from './venn.jison';
import { db } from '../vennDB.js';
import { expect } from 'vitest';

describe('Venn diagram', function () {
beforeEach(function () {
venn.parser.yy = db;
venn.parser.yy.clear();
venn.parser.yy.getLogger = () => console;
});

test('simple', () => {
const str = `venn-beta
title foo bar
sets A
sets B
sets A,B
`;
venn.parse(str);
expect(db.getDiagramTitle()).toBe('foo bar');
expect(db.getSubsetData()).toEqual([
expect.objectContaining({ sets: ['A'], size: 10 }),
expect.objectContaining({ sets: ['B'], size: 10 }),
expect.objectContaining({ sets: ['A', 'B'], size: 2.5 }),
]);
});

test('with options', () => {
const str = `venn-beta
title foo bar
sets A
sets B size : 20
sets C size : 30, label : bar
sets A,D size : 5.3, label : foo
sets C, A,B
`;
venn.parse(str);
expect(db.getSubsetData()).toEqual([
expect.objectContaining({ sets: ['A'], size: 10 }),
expect.objectContaining({ sets: ['B'], size: 20 }),
expect.objectContaining({ sets: ['C'], size: 30, label: 'bar' }),
expect.objectContaining({ sets: ['A', 'D'], size: 5.3, label: 'foo' }),
expect.objectContaining({ sets: ['A', 'B', 'C'], size: 1.1111111111111112 }),
]);
});

test('with elements', () => {
const str = `venn-beta
title foo bar
sets A
sets B size : 20
sets C size : 30, label : bar
sets A,D size : 5.3, label : foo
sets C, A,B
`;
venn.parse(str);
expect(db.getSubsetData()).toEqual([
expect.objectContaining({ sets: ['A'], size: 10 }),
expect.objectContaining({ sets: ['B'], size: 20 }),
expect.objectContaining({ sets: ['C'], size: 30, label: 'bar' }),
expect.objectContaining({ sets: ['A', 'D'], size: 5.3, label: 'foo' }),
expect.objectContaining({ sets: ['A', 'B', 'C'], size: 1.1111111111111112 }),
]);
});
});
Loading
Loading