Made in DeveloperHub
Graphs/Charts
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:
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
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 RequestBob-->Alice: Authentication Response</pre></div><script type="text/javascript" src="https://www.websequencediagrams.com/service.js"></script>Rendered as such:
Alice->Bob: Authentication Request Bob-->Alice: Authentication Response
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>@startumlBob -> 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: