Gráficos/Diagramas

Herramientas de IA

La web está llena de bibliotecas de código abierto para crear gráficos y diagramas. La buena noticia es que, si tienen una API de javascript, puedes usar Custom Javascript con Custom HTML para renderizarlos directamente en la página. En esta página veremos cómo añadir la integración de distintas bibliotecas.

Gráficos Mermaid

MermaidJS te permite crear diagramas y visualizaciones usando texto y código. Para usarlo en DeveloperHub, configura un bloque Custom HTML con este contenido:

<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>

Se renderiza así:

WebSequenceDiagrams

WebSequenceDiagrams crea diagramas de secuencia. Para usarlo en DeveloperHub, añade un bloque Custom HTML con este contenido:

<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>

Se renderiza así:

PlantUML

PlantUML es un componente que te permite escribir rápidamente muchos tipos de diagramas. Para usarlo en DeveloperHub, añade un bloque Custom HTML con este contenido:

<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>

Sustituye el contenido del elemento UML por el UML que desees.

Se renderiza así:

JSON Crack

JSON Crack es una herramienta de visualización de JSON para visualizar, formatear y modificar. Para usarla en DeveloperHub, añade un bloque Custom HTML con el contenido de inserción, aplicando estilo a iframe:

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

Se renderiza así:


  Última actualización por Zaid Daba'een el Aug 16, 2024
Creado con DeveloperHub

Need help? Visit our community forums or contact us.

Editar en GitHub
Tabla de Contenido
Gráficos/DiagramasGráficos MermaidWebSequenceDiagramsPlantUMLJSON Crack