Pele: Mermaid-diagrammen als aanpasbare SVG's

Hoe het werkt

Schrijf Mermaid-syntaxis en Pele rendert dit naar SVG.

Voorbeeld van Mermaid-syntaxis:

flowchart TD
  A[Mermaid tekst] --> B{Flowchart?}
  B -- Ja --> C[Pele]
  B -- Nee --> D[Mermaid]
  C --> E([SVG])
  D --> E

Gebruik CSS-variabelen om kleuren en lettertypen in te stellen. Kleurwijzigingen worden toegepast zonder dat het diagram opnieuw gerenderd hoeft te worden.

CSS-voorbeeld:

.pele {
  --pele-bg: #fffcf0;
  --pele-fg: #100f0f;
  --pele-muted: #6f6e69;
  --pele-line: #100f0f;
  --pele-surface: #f2f0e5;
  --pele-surface-alt: #e6e4d9;
  --pele-border: #cecdc3;
}

Waarom Pele?

Pele heeft geen afhankelijkheden, is 6 keer kleiner en tot 500 keer sneller dan Mermaid.js. Pele ondersteunt elk diagramtype dat is ingebouwd in Mermaid 12.1.0.

Vergelijking tussen Pele en Mermaid.js

Pele in je applicatie

Voeg Pele toe aan je applicatie via de API.

Installatie:

• npm install pele
• pnpm add pele
• yarn add pele
• bun add pele

Gebruik: Geef de Mermaid-syntaxis mee aan render() en voeg de teruggegeven SVG in op je pagina.

import { render } from 'pele';

const { svg } = render(`flowchart LR
  A[Mermaid tekst] --> B[SVG]`);

document.querySelector('#diagram').innerHTML = svg;

Verkenning

• Voorbeelden: Bekijk de ondersteunde diagramtypes.
• API: Render diagrammen in je applicatie.
• Theming: Stel kleuren en lettertypen in met CSS-variabelen.
• Compatibiliteit: Vergelijk de syntaxis, lay-out en functies met Mermaid.

Over Pele

Pele is open source en is ontwikkeld voor Obsidian om diagrammen snel te renderen en deze af te stemmen op het gekozen thema. De bibliotheek is vernoemd naar Pele, de godin van vulkanen en vuur.

Pele is open source onder de MIT-licentie.