kumahq / kuma-website

🐻 The official website for Kuma, the control plane for modern service connectivity.
https://kuma.io
Apache License 2.0
104 stars 87 forks source link

feat(mermaid): add Mermaid.js diagrams plugin #1602

Closed bartsmykla closed 7 months ago

bartsmykla commented 7 months ago

From: https://github.com/kumahq/kuma-website/pull/1547

The docs team recently added Mermaid.js to our own docs repo (see PR here) to make it easy to create diagrams. We also added some custom styles to match our branding colors. I thought it would make a nice addition to the Kuma repo, and I have a doc that I'm writing that would benefit from this diagram tool.

It can be used with the following syntax:

{% mermaid %}
{% endmermaid %}

With mermaid we can describe graphs and diagrams in a markdown file and have them render as what we want. So

{% mermaid %}
 gantt
    title Git Issues - days since last update
    dateFormat  X
    axisFormat %s

    section Issue19062
    71   : 0, 71
    section Issue19401
    36   : 0, 36
    section Issue193
    34   : 0, 34
    section Issue7441
    9    : 0, 9
    section Issue1300
    5    : 0, 5
{% endmermaid %}

would render as: image

We've been using https://mermaid.live/edit to easily generate diagrams and see the rendered output before adding it to docs.

netlify[bot] commented 7 months ago

Deploy Preview for kuma ready!

Name Link
Latest commit d666228a3a2821bd96d7af505491db5e95ce3dde
Latest deploy log https://app.netlify.com/sites/kuma/deploys/65b08f5cc9bf430008ca0f95
Deploy Preview https://deploy-preview-1602--kuma.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.