Skip to content
Astro Digital Garden

Euler diagram

#page#markdown#link#component#diagram#gfm#code-fences#obsidian

aka: Venn diagram

The above Euler diagram shows tags on this website. It’s not a static picture; it is generated based on the content every time the website is updated.

Installation

venn-isomorphic

  1. Install dependencies

    Terminal window
    pnpm add venn-isomorphic

  2. Create EulerDiagram component

    src/components/EulerDiagram.astro
    ---
    import { createVennRenderer, type ISetOverlap } from "venn-isomorphic";
    

    interface Props {
      items: ISetOverlap[];
    }
    

    const items = Astro.props.items;
    

    const renderer = createVennRenderer();
    const results = await renderer([items]);
    const [result] = results;
    let svg =
      result.status == "fulfilled" ? result.value.svg : String(result.reason);
    ---
    

    <figure class="euler not-content beoe">
     <Fragment set:html={svg} />
    </figure>

  3. Use component, wherever you like

edeap

#code-fences #component #diagram #gfm #link #markdown #obsidian #page 4 5 4 1 4 3 1 9 1 1 1 1 1

Edeap - Euler Diagrams Drawn with Ellipses Area-Proportionally.

Pros:

  • It shows areas proportional to set sizes.
  • It works without a headless browser.

Cons:

  • The venn-isomorphic diagram looks better.

  1. Install dependencies

    Terminal window
    pnpm add edeap

  2. Create EdeapDiagram component

    src/components/EdeapDiagram.astro
    ---
    import { edeapSvg, type ISetOverlap } from "edeap";
    

    interface Props {
      items: ISetOverlap[];
    }
    

    let svg = edeapSvg({ overlaps: items });
    ---
    

    <figure class="euler not-content beoe">
      <Fragment set:html={svg} />
    </figure>

  3. Use component, wherever you like

Theory