Skip to content

Latest commit

 

History

History
131 lines (104 loc) · 4.32 KB

mermaid.md

File metadata and controls

131 lines (104 loc) · 4.32 KB
Raw

Het VNG-R Respec proces

Onderstaande flowchart beschrijft het proces zoals we dat binnen VNG Realisatie hanteren om tot Respec documentatie te komen. Daarnaast is het echter ook een voorbeeld van het gebruik van de Mermaid syntax voor het vervaardigen van zo'n flowchart.

%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
graph TD
    A([Start])---->B{"<b>1</b><br/>Eerste versie<br/>van Respec<br/>documentatie?"}
    click B callback "Tooltip for B"
    B{"<b>1</b><br/>Eerste versie<br/>van Respec<br/>documentatie?"}--Nee-->C("...")
    C("...")---->D("<b>3</b><br/>Creëer nieuwe content of pas content aan")
    C("...")---->E("<b>5</b><br/>Pas basisstructuur aan voor versie")
    D("<b>3</b><br/>Creëer nieuwe content of pas content aan")---->I("<b>4</b><br/>Assembleer document")
    I("<b>4</b><br/>Assembleer document")---->J("<b>5</b><br/>Pas document configuratie properties aan")
    B{"<b>1</b><br/>Eerste versie<br/>van Respec<br/>documentatie?"}--Ja-->F("...")
    F("...")---->G("<b>2</b><br/>Creëer en configureer project repo")
    F("...")---->H("<b>6</b><br/>Creëer basisstructuur in publicatie repo")
    G("<b>2</b><br/>Creëer en configureer project repo")---->D("<b>3</b><br/>Creëer nieuwe content of pas content aan")
    H("<b>6</b><br/>Creëer basisstructuur in publicatie repo")---->E("<b>7</b><br/>Pas basisstructuur aan voor versie")
    E("<b>7</b><br/>Pas basisstructuur aan voor versie")---->K("<b>8</b><br/>Plaats gegenereerde documenten in publicatie repo")
    K("<b>8</b><br/>Plaats gegenereerde documenten in publicatie repo")---->L("<b>9</b><br/>Gebruik publicatie link Respec doc in GH Pages")
    J("<b>5</b><br/>Pas document configuratie properties aan")---->K("<b>8</b><br/>Plaats gegenereerde documenten in publicatie repo")
    L("<b>9</b><br/>Gebruik publicatie link Respec doc in GH Pages")---->M([Stop])
Loading
Het VNG-R Respec proces (Mermaid voorbeeld)

Zie de 'GitHub documentatie' voor een uitleg van de Mermaid syntax.

Aandachtspunten m.b.t. Mermaid

  • In de code van het bovenstaand voorbeeld is de mermaid code binnen een figure element geplaatst'. Let daarbij op dat er voorafgaand aan de eerste en na de laatste ``` code een lege regel wordt geplaatst. Het figure element mag dus niet direct aansluiten op de ``` code.
  • Vermijd markdown frontmatter secties zoals
    ---
    title: Animal example
    ---
    De ervaring is dat deze een goede verwerking van de Mermaid code verhinderd.

Hieronder nog een aantal Mermaid voorbeelden.

%%{init: { "sequence": { "useMaxWidth": true } } }%%
sequenceDiagram
    participant dotcom
    participant iframe
    participant viewscreen
    dotcom->>iframe: loads html w/ iframe url
    iframe->>viewscreen: request template
    viewscreen->>iframe: html & javascript
    iframe->>dotcom: iframe ready
    dotcom->>iframe: set mermaid data on iframe
    iframe->>iframe: render mermaid
Loading
Sequence diagram 
stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
Loading
state diagram 
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
Loading
ER diagram 
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
Loading
Journey diagram 
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
Loading
Gantt chart 
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
Loading
Pie charts