発端

https://github.com/mermaid-js/mermaid/issues/2583
最近mermaidを愛用しているのだが、なぜかベン図に対応していないなと気づいた。
流石にベン図を使いたい人は多くいるだろ、と思いIssueを漁るといくつかあった。
その中で一番議論がなされているIssueが上のリンクのやつ。

なぜ実装されていないのか

まだ実装されていない理由としては、以下が挙げられる

• ベン図の基本集合要素(?)が4つ以上の場合の視覚表現が難しい
  • 上の実装が難しい
  • 実装に関して複数の提案がある
• 記法についての議論
• オイラー図との混合

参考

• mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
• ベン図の構文 ·問題 #2583 ·マーメイド-JS/マーメイド
• upsetjs/venn.js: Area proportional Venn and Euler diagrams in JavaScript
• venn.js | Area proportional Venn and Euler diagrams in JavaScript
• InteractiVenn: a web-based tool for the analysis of sets through Venn diagrams | BMC Bioinformatics | Full Text
• InteractiVenn - Interactive Venn Diagrams
• feat: Add Venn diagram by exoego · Pull Request #5932 · mermaid-js/mermaid

提案されている記法一覧

Issue作成者による提案

• まず集合を定義
• 2つの要素について基本的な結合則を適用するタイプ

vennDiagram
  set A
  set B
  set C

  intersect A B
  union B C
  relativeComplement A C

@NicolasNewman氏による提案

https://github.com/upsetjs/venn.js?tab=readme-ov-file#usage

• Issue作成者ベース
• venn.jsの記法を引用している
• 集合の大きさ（円面積）を定義
• （オプション）集合要素の名づけ

venn
    set B "Blue" size 8
    set G "Green"
    set R "Red"
    intersect G B "Cyan"
    intersect R G B "White" size 12

@a氏による提案

• a

mermaid以外のライブラリ使用

@Bruno Peixoto氏はそれぞれ以下のライブラリを使用するように勧めています。
ちなみにこれらは彼によって開発されました。

• python
  • https://github.com/quivero/eule
• javascript
  • https://github.com/trouchet/eulejs

• JS: https://github.com/upsetjs/venn.js
• PY: https://pypi.org/project/matplotlib-venn/

私がmermaidに求めるベン図

• 5,6変数以上の複雑なベン図は求めていない
• 2~3変数以上（場合によっては4）に対応してくれればそれでいい
• オイラーグラフも考慮して実装してほしい
• そもそもベン図はライトに使いたい
  • 条件分岐を考慮するときに集合関係を視覚に起こして整理したい
  • 仕様や設計を他者と共有するときにサッと出したい（この時は手書きでもいい）
  • → ドキュメントで依存関係を整理しながら開発したい

コミュニティ内でも「複雑なベン図は一旦置いといて、簡単なベン図を扱いたい！」って人多かったし、実装してほしいな～

進行中のPR

https://github.com/mermaid-js/mermaid/pull/5932
ベン図実装では上のPRが唯一作成されているが、去年の10月以降新しいコミットがない。
まだサークル内にテキストノードを追加している作業中だそうなので、今後の動向に注視したい。

時間がある時に実装も見てみたい。