Zeemeermindiagrammen

Het Zeemeermindiagram brengt het maken van native diagrammen direct in de editor. Aangedreven door Mermaid.js kun je tekstgebaseerde diagramsyntaxis schrijven en een gerenderd, visueel diagram in realtime bekijken – allemaal zonder je documentatiewerkruimte te verlaten. Diagrammen worden opgeslagen als bewerkbare broncode naast een gerenderd beeld. Dit betekent dat je diagrammen altijd opnieuw bewerkt kunnen worden en nooit verouderde statische screenshots worden.

Wat is Mermaid.js?

Mermaid.js is een open-source diagrambibliotheek die platte tekstsyntaxis omzet in visuele diagrammen. In plaats van vormen handmatig te tekenen in een apart gereedschap, beschrijf je het diagram in tekst en rendert Mermaid het. Document360 embedt Mermaid.js direct in de editor, zodat de hele workflow verloopt zonder je artikel te verlaten.

Voorbeeld: De volgende vier regels tekst vormen een volledig stroomdiagram:

graph TD
  A[User submits ticket] --> B{Priority?}
  B -- High --> C[Notify on-call team]
  B -- Low  --> D[Add to backlog]

Wanneer te gebruiken van zeemeermindiagrammen

Gebruik zeemeermindiagrammen wanneer je inhoud een proces, relatie of structuur bevat die moeilijker in woorden uit te leggen is. Enkele veelvoorkomende scenario's:

• Een technisch schrijver die een goedkeuringsproces of onboardingreis documenteert
• Een ontwikkelaar of architect die een API-interactie, systeemarchitectuur of databaseschema illustreert
• Een productmanager die een gebruikersreis in kaart brengt of een projecttijdlijn visualiseert
• Een ondersteuningsteam dat een probleemoplossingsstroomdiagram of escalatiepad bouwt

Als je merkt dat je een reeks stappen of verbindingen tussen componenten over meerdere alinea's beschrijft, zal een diagram dit bijna altijd sneller communiceren.

Belangrijkste voordelen

Een zeemeermindiagram invoegen

Om een zeemeermindiagram in je artikel in te voegen:

1. Klik in de tekst van het artikel waar je het diagram wilt laten verschijnen.
2. Typ / (forward slash) om het slash-commandomenu te activeren.
3. Typ Mermaid om de suggesties te filteren.
4. Selecteer het zeemeermindiagram uit het keuzemenu.

Een sjabloon kiezen

Zodra je de invoeging van het Zeemeermin-diagram activeert, verschijnt de template-selectiemodal. Hier kies je het startpunt voor je diagram.

• Vanuit een sjabloon — Blader of zoek door de 23 beschikbare sjablonen, en klik dan op één. De editor opent met de syntaxis van dat sjabloon vooraf geladen.
• Vanuit leeg — Klik op leeg om de editor te openen met een leeg syntaxispaneel. Gebruik dit alleen als je de Zeemeermin-syntaxis al kent.

Een sjabloon kiezen

1. Blader door de 23 sjabloonkaarten of typ een trefwoord (bijv. flow, sequence, gantt) in de zoekbalk.
2. Klik op de sjabloonkaart die overeenkomt met wat je wilt maken.
3. De editor opent met de syntaxis van dat sjabloon vooraf geladen. Bewerk het verder om bij je inhoud te passen.

Met een leeg canvas

1. Klik op de optie Blanco in het sjabloonraster.
2. De editor opent met een leeg syntaxispaneel.
3. Typ je Mermaid-syntaxis helemaal vanaf nul.

Schrijven en bekijken van je diagram

De Mermaid diagrameditor is een werkruimte met twee panelen. Het linkerpaneel is waar je je Zeemeermin-syntaxis schrijft. Het rechterpaneel toont een live preview van het diagram terwijl je typt.

1. Begin met een diagramtype-verklaring op de eerste regel. Dit vertelt Mermaid wat voor soort diagram te renderen.

   Diagramtype	Eerste lijn
   Stroomdiagram (van boven naar beneden)	graph TD
   Stroomdiagram (van links naar rechts)	graph LR
   Sequentiediagram	sequenceDiagram
   Klassendiagram	classDiagram
   Gantt-diagram	gantt
   Toestandsdiagram	stateDiagram-v2
   Entiteit-relatiediagram	erDiagram
   Taartdiagram	pie
   Mindmap	mindmap

2. Voeg knooppunten, verbindingen en labels toe aan de volgende regels. Elke regel die je typt werkt direct de preview aan de rechterkant bij.

3. Als je met een sjabloon werkt, vervang dan simpelweg de tijdelijke tekst door je eigen labels en verbindingen.

Als je syntaxis hele lange lijnen heeft (bijvoorbeeld lange nodelabels of gedetailleerde randbeschrijvingen), klik dan op de Wrap code-schakelaar onder het syntaxispaneel om lange lijnen binnen de zichtbare editorbreedte te wikkelen. Dit beïnvloedt de uitvoer van het diagram niet — het verandert alleen hoe de code in de editor verschijnt.

Preview-besturing

Het rechterpaneel werkt direct bij terwijl je typt. Gebruik de preview-bediening om je diagram te inspecteren voordat je het invoegt.

Inzoomen / Uitzoomen — Klik op de inzoomknop (+) of uitzoomen (−) om de vergroting van de preview te vergroten of te verlagen. Gebruik dit om specifieke delen van een complex diagram te inspecteren zonder de daadwerkelijke diagramgrootte in het artikel te beïnvloeden.

Fit to screen — Klik op het fit to-scherm ( ) icoon om het zoomniveau te resetten zodat het hele diagram zichtbaar is in het preview-gedeelte zonder te scrollen. Gebruik dit voor een laatste beoordeling voordat je het invoegt.

Uitvouwen / Inklappen — Klik op het pictogram 'expanderen ' ( ) in de toolbar van het voorbeeldpaneel om de syntaxeditor te verbergen en de voorbeeldweergave uit te breiden om de volledige modale breedte te vullen. Klik op het inklappen ( ) icoon om terug te keren naar het split-panel view en verder te bewerken.

Afhandeling van syntaxisfouten

Als je syntaxis ongeldig is, toont de preview een foutmelding en is de Insert-knop uitgeschakeld.

1. Lees het foutbericht. Het bevat het lijnnummer dat het probleem veroorzaakt.
2. Herstel die regel in het syntaxispaneel.
3. De preview wordt automatisch bijgewerkt. Zodra deze geldig is, wordt de Invoegen-knop actief.

Veelvoorkomende fouten en oplossingen

:::(Voorzichtig) (

Het diagram invoegen in het artikel

Zodra de preview correct en foutloos is, klik je op Invoegen. Document360 zet het diagram om in een SVG-afbeelding en plaatst het op de positie van je cursor.

Twee dingen worden voor elk diagram opgeslagen:

• De weergegeven SVG-afbeelding — zichtbaar in het artikel en op de KB-site.
• De Zeemeermin-syntaxis — privé opgeslagen, gebruikt wanneer je later het diagram bewerkt.

Beheer van een ingevoegd diagram

Klik op een ingevoegd diagram om het bubbelmenu te openen.

Een bestaand diagram bewerken

Elk zeemeermindiagram dat je invoegt kan op elk moment worden bewerkt, zelfs nadat het artikel is gepubliceerd. De oorspronkelijke syntaxis wordt altijd opgeslagen.

1. Klik op het diagram en klik vervolgens op Diagram bewerken in het bubbelmenu.
2. De editor opent met de opgeslagen syntaxis en een live preview.
3. Maak je eigen veranderingen.
4. Klik op Update. Het diagram in het artikel is vervangen; positie en uitlijning blijven behouden.

Als je na het aanbrengen van wijzigingen op Annuleren of (X) klikt, verschijnt er een bevestigingsdialoog. Klik op Ja, verwijder om af te sluiten zonder op te slaan, of Nee, ga terug om verder te bewerken.

Hoe lezers je diagrammen zien

Op de kennisbanksite verschijnen diagrammen als statische SVG-afbeeldingen die in het artikel zijn ingebed. Lezers kunnen op elk diagram klikken om een volledig scherm overlay te openen, wat handig is voor grote of complexe diagrammen. Bewerkingscontroles en bronsyntaxis worden nooit aan lezers blootgesteld.

Best practices

• Eén diagram, één idee. Als een stroomdiagram meer dan 15–20 knooppunten bevat, splits het dan op in een overzichtsdiagram en een detaildiagram.
• Voeg altijd een bijschrift toe. Gebruik de bijschriftoptie in het bubbelmenu om elk diagram te labelen. Het helpt lezers de context in één oogopslag te begrijpen.
• Gebruik SVG voor extern gebruik. SVG is oneindig schaalbaar zonder kwaliteitsverlies. Gebruik PNG alleen als de bestemmingstool geen SVG ondersteunt.
• Kopieer naar duplicate, niet om opnieuw op te bouwen. Gebruik de actie 'Bubbel' kopiëren om een diagram te dupliceren. Elke kopie heeft een onafhankelijke syntaxis — het bewerken van de ene heeft geen invloed op de andere. Een zeemeermindiagram buiten Document360 plakken (bijvoorbeeld in een ander gereedschap) plakt alleen de afbeelding, niet de bronsyntaxis.

Beschikbare sjablonen

De volgende sjablonen zijn beschikbaar in het sjabloonselectiescherm. Zoek op naam of trefwoord om snel de juiste te vinden.

FAQ