▲ PromNET

SÚGÓ › Kezdési útmutató

Mermaid-diagrammok a kurzus-leckékben

Hogyan render-eli a kurzus-platform a Mermaid-diagrammokat: flowchart, sequenceDiagram, ER, gantt, és pie-chart. Saját Markdown-content-be is építhető.

A PromNET-kurzusok minden leckéjében legalább 1 vizuális Mermaid-diagramm van. A renderer Mermaid.js-szel működik, és a klasszikus flowchart, sequenceDiagram, ER, Gantt, pie-chart és más típusokat is támogatja. Saját Markdown-blogposztodba is integrálható.

1. Mi a Mermaid?

A Mermaid egy szöveg-alapú diagramm-leíró nyelv. Egy egyszerű text-blokkból generálsz egy SVG-ábrát. Például:

```mermaid
flowchart LR
  A[Bemenet] --> B{Ellenőrzés}
  B -- siker --> C[Mentés]
  B -- hiba --> D[Hibaüzenet]
```

Ebből a renderer ezt a diagrammot generálja:

flowchart LR
  A[Bemenet] --> B{Ellenőrzés}
  B -- siker --> C[Mentés]
  B -- hiba --> D[Hibaüzenet]

2. Mire jó kurzus-leckékben?

  • Folyamat-vizualizáció — egy 5-lépéses regisztrációs-flow ránézésre érthető
  • Architektúra-ábra — komponensek közötti kapcsolatok
  • Sequence-diagrammok — időbeli interakciók (User → Server → DB → User)
  • State-machine — egy objektum állapot-átmenetei
  • Gantt — projekt-ütemterv

A vizualizáció hangsúlyt-fókuszál — a 200 szavas paragrafus helyett egy tiszta diagrammon átfutva érted az egészet.

3. Támogatott típusok

A kurzus-renderer az alábbi Mermaid-típusokat tudja:

a) Flowchart (folyamat-ábra)

flowchart TD
  Start[Indulás] --> Decision{Választás}
  Decision -->|igen| Yes[Folytatás]
  Decision -->|nem| No[Vége]

b) Sequence Diagram (idő-szekvencia)

sequenceDiagram
  participant U as User
  participant A as App
  participant DB as DB
  U->>A: Bejelentkezés
  A->>DB: SELECT user
  DB-->>A: User-rekord
  A-->>U: JWT-token

c) ER Diagram (adatbázis-séma)

erDiagram
  USER ||--o{ PROJECT : "tulajdonos"
  PROJECT ||--o{ FILE : "tartalmaz"
  USER {
    int id PK
    string email
  }
  PROJECT {
    int id PK
    string slug
  }

d) Gantt (ütemezés)

gantt
  title PromNET roadmap Q1
  dateFormat YYYY-MM-DD
  section Plugins
  Workers AI bevezetés    :a1, 2026-01-01, 30d
  Vectorize bevezetés     :a2, after a1, 20d
  Hyperdrive bevezetés    :a3, after a2, 15d

e) Pie chart

pie title "Felhasználói plugin-arány"
  "Workers AI" : 35
  "Vectorize" : 22
  "Hyperdrive" : 18
  "Edge KV" : 15
  "Egyéb" : 10

f) State Diagram

stateDiagram-v2
  [*] --> pending
  pending --> active: aktiváltam
  active --> cancelled: lemondtam
  cancelled --> [*]

4. Hogyan render-elődik?

A kurzus-platform a Markdown-tartalmat MDX-ben dolgozza fel. Minden ```mermaid-blokkot átdob a Mermaid.js-nek (CDN-ről), ami kliensoldalon SVG-vé alakít.

Előnyök:

  • Akadálymentes — SVG-ben szöveges-tartalom van, screen-reader is olvassa
  • Reszponzív — viewport-szélesség alapján skálázódik
  • Keresőbarát — a forrás-kód a HTML-ben látszik, nem image
  • Editor-friendly — szöveg-alapú, könnyen editálható

A render lazyload-os: csak akkor töltődik be a Mermaid.js, ha diagramm-blokk van az oldalon. Ha nincs, a JS-bundle nem hívódik be.

5. Saját kurzus-leckében

Ha saját kurzust írsz (vagy a roadmap-en várt “marketplace”-en közzéteszel egyet), a Mermaid-blokkot ugyanúgy ```mermaid jelölőben add meg.

Tipp: az Mermaid Live Editor-en gyorsan összerakhatsz egy diagrammot vizuálisan, majd a “Code”-tab-ot kimásolod a kurzus-leckedbe.

6. Saját blog-cikkben (Astro / Hugo / Eleventy)

Ha a saját Cloud-projektedben akarsz Mermaid-diagrammokat:

Astro

npm install astro-mermaid

Az astro.config.mjs-ben:

import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [mermaid()],
});

A .md cikkekben már működik.

Hugo

A hugo.toml-ban:

[markup.goldmark.renderer]
  unsafe = true

A téma single.html-jébe:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true });</script>

Eleventy

eleventy-plugin-mermaid plugin-t adj a config-hoz.

7. Tipikus hibák

“Diagrammnak üres a hely”: szintaktikai hiba a Mermaid-blokkban. A Mermaid Live Editor-on ellenőrizd először.

“A diagramm túlnő a screenen”: hosszú flowchart ne LR (left-right) hanem TD (top-down) legyen.

“Magyar ékezetek el-rontódnak”: Mermaid alapból UTF-8 — ha furcsa, az a kurzus-renderer-bug. Írj support-ticket-et.

“Mermaid nem tölt be”: a böngésződ JavaScript-blokkolja a CDN-t. Engedélyezd a cdn.jsdelivr.net -t.

8. Stílus-testreszabás

A kurzus-renderer-ben a Mermaid default-themét használjuk (sötét és világos verzió, profil-szerinti). Saját kurzus-leckédben theme-direktívával testreszabhatod:

```mermaid
%%{init: {'theme':'forest'}}%%
flowchart LR
  A --> B
```

A támogatott témák: default, forest, dark, neutral, base.

9. Komplex példák a kurzusokban

A 12-leckés Astro-kurzus 7. leckéjében (Content Collections) ez a diagramm szerepel:

flowchart LR
  Schema[Zod-schema] --> Definition[defineCollection]
  Definition --> Collection[content/blog/]
  Collection --> Files[.md fájlok]
  Files --> Validation{Schema-validáció}
  Validation -- ok --> TypeSafe[Type-safe API]
  Validation -- hiba --> Error[Build-error]
  TypeSafe --> getCollection[getCollection 'blog']

A vizuális ábrából egyértelműen látszik a folyamat — szöveg-formában sokkal hosszabb lenne.

10. Roadmap

  • Diagramm-alá-tip-szöveg — kurzor-ráhúzva tooltip-ben részletes magyarázat
  • Klikkelhető-diagramm — egy node-ra kattintva linkre vezet
  • Mermaid 11+ újdonságok — Architecture Diagram, Sankey Chart bevezetése
  • Saját-szín-paletta — a PromNET-brand színeivel matched diagrammok

Szavazz a /roadmap-on, melyik kell hamarabb!

← Kezdési útmutató Frissítve: 2026. 05. 08.