Graphs/Charts

AI Tools

The web is full of different graphing/charting open-source libraries. The good news is that if it has a javascript API, then you can use Custom Javascript with Custom HTML to render directly on the page. In this page, we'll look into how to add the integration for different libraries.

Mermaid Charts

MermaidJS lets you create diagrams and visualisations using text and code. To use it in DeveloperHub, set up a Custom HTML block with such contents:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <div class="mermaid"> sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! </div> <script> mermaid.init(); window.postMessage('resize', '*'); // resizes the container to remove scroll </script>

Rendered as such:

WebSequenceDiagrams

WebSequenceDiagrams creates sequence diagrams. To use it in DeveloperHub, add a Custom HTML block with such contents:

<div class=wsd wsd-style="modern-blue" ><pre> Alice->Bob: Authentication Request Bob-->Alice: Authentication Response </pre></div><script type="text/javascript" src="https://www.websequencediagrams.com/service.js"></script>

Rendered as such:

PlantUML

PlantUML is a component that allows you to quickly write many kinds of diagrams. To use it in DeveloperHub, add a Custom HTML block with such contents:

<head> <script src="//cdn.rawgit.com/jmnote/plantuml-encoder/d133f316/dist/plantuml-encoder.min.js"></script> </head> <body> <uml> @startuml Bob -> Alice : hello @enduml </uml> <script> var el = document.getElementsByTagName('uml')[0]; var src = "//www.plantuml.com/plantuml/svg/" + window.plantumlEncoder.encode(el.textContent); var img = document.createElement('IMG'); img.src = src; img.style.maxWidth = '100%'; img.onclick = function() {window.postMessage({zoomImage: src}, '*')}; el.replaceWith(img); window.postMessage('resize', '*'); </script> </body>

Replacing the contents of UML element with the desired UML.

Rendered as such:

JSON Crack

JSON Crack is a JSON viewer tool to visualise, format and modify. To use it in DeveloperHub, add a Custom HTML block with the embed contents, styling the iframe:

<iframe style="border: none; width: 100%; height: 300px;" src="https://jsoncrack.com/widget?json=639b65c5a82efc29a24b2de2" />

Rendered as such:


  Last updated on Jun 23, 2026
Next to read:
Latex

Staging Environment

Edit on GitHub
On This Page