Skip to content

Commit

Permalink
init venn diagram
Browse files Browse the repository at this point in the history
  • Loading branch information
exoego committed Oct 27, 2024
1 parent d16e46a commit 7aefbc3
Show file tree
Hide file tree
Showing 22 changed files with 666 additions and 7 deletions.
1 change: 1 addition & 0 deletions .build/jsonSchema.ts
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
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
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
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
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
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
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
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
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
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
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
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

0 comments on commit 7aefbc3

Please sign in to comment.