init venn diagram

mermaid-js · Oct 4, 2024 · 7cb3b11 · 7cb3b11
1 parent a07f1f3
commit 7cb3b11
Show file tree

Hide file tree

Showing 19 changed files with 1,305 additions and 89 deletions.
diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts
@@ -26,6 +26,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'block',
   'packet',
   'architecture',
+  'euler',
 ] as const;
 
 /**

diff --git a/demos/index.html b/demos/index.html
@@ -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>
diff --git a/demos/venn.html b/demos/venn.html
@@ -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>
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
@@ -70,6 +70,7 @@
     "@braintree/sanitize-url": "^7.0.1",
     "@iconify/utils": "^2.1.32",
     "@mermaid-js/parser": "workspace:^",
+    "@upsetjs/venn.js": "^1.4.2",
     "cytoscape": "^3.29.2",
     "cytoscape-cose-bilkent": "^4.1.0",
     "cytoscape-fcose": "^2.2.0",

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -198,6 +198,7 @@ export interface MermaidConfig {
   sankey?: SankeyDiagramConfig;
   packet?: PacketDiagramConfig;
   block?: BlockDiagramConfig;
+  venn?: VennDiagramConfig;
   dompurifyConfig?: DOMPurifyConfiguration;
   wrap?: boolean;
   fontSize?: number;
@@ -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".

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
@@ -251,6 +251,9 @@ const config: RequiredDeep<MermaidConfig> = {
   packet: {
     ...defaultConfigJson.packet,
   },
+  venn: {
+    ...defaultConfigJson.venn,
+  },
 };
 
 const keyify = (obj: any, prefix = ''): string[] =>

diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -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';
 
@@ -92,6 +93,7 @@ export const addDiagrams = () => {
     packet,
     xychart,
     block,
-    architecture
+    architecture,
+    venn
   );
 };
diff --git a/packages/mermaid/src/diagrams/venn/parser/venn.jison b/packages/mermaid/src/diagrams/venn/parser/venn.jison
@@ -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] }
+  ;
+
+%%
diff --git a/packages/mermaid/src/diagrams/venn/parser/venn.spec.ts b/packages/mermaid/src/diagrams/venn/parser/venn.spec.ts
@@ -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 }),
+    ]);
+  });
+});
-Original file 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>