Spoiler: use   para representar DAG escritos en lenguaje DOT Vizdom.dev  Como desarrollador de software, ocasionalmente he trabajado con DAG, la mayoría de los cuales implican visualizarlos. En muchos casos, me resultó difícil obtener un renderizado rápido y me encontré buscando herramientas.  Afortunadamente, existe el confiable  herramienta que puede representar gráficos escritos en el lenguaje DOT: ¡Perfecto!   Grafiz  Excepto…  No funciona bien en la web*  necesito instalarlo  No gestiona archivos DOT/GV en línea  Consideraciones  *Bien,   Graphviz se puede compilar en WebAssembly, y algunas personas talentosas lograron construir algunos proyectos interesantes como el de Dreampuf.  , Nikeee  y magjac  – cada uno con su propio toque. Todavía me cuesta incrustar estas representaciones sin exportarlas a un SVG (u otro medio). técnicamente   editor   edotor.net   editor  Por ejemplo, quiero almacenar mi gráfico en  simplemente pegando un enlace que representa automáticamente el gráfico.   Noción.so  Podría usar  que representa gráficos de manera bastante limpia y funciona sorprendentemente bien; es una de las muchas razones por las que tiene  . También puedo incrustar gráficos en Notion/GitHub usando Markdown, ¡genial!   sirenajs    GitHub 64k+ inicios en  Desafortunadamente, tengo que traducir el DOT al tipo de descuento que requiere Mermaid. Para representaciones textuales más pequeñas, puedo usar ChatGPT para convertirlas por mí, pero con frecuencia comete errores gramaticales y el gráfico se negará a representarse, lo que lo hace poco confiable como fuente de automatización.  Entonces hay  lo cual es sorprendente para administrar diagramas   , pero al igual que mis problemas con Mermaid, no puedo convertir DOT a D2 de manera confiable. Supongo que si vas a construir diagramas a mano, este es un costo único aceptable. En general, es una herramienta fantástica. ¡Prestigio!   Terrastruct.com hechos a mano  El problema  Quiero representar resultados DOT generados   ; ninguna de las herramientas parece ayudarme a lograr ese objetivo. mediante programación  Quiero insertar enlaces que representen gráficos.  Quiero almacenar la representación en línea para actualizarla o compararla visualmente con otros gráficos.  La solución  Sí, construí un  por eso 🎉   aplicación  …Y está construido íntegramente en Rust 🦀 con muchas gracias a   Leptos     tl;dr : una aplicación sencilla y especialmente diseñada para renderizar DAG en línea de forma rápida  Minimizar los cruces de bordes en la generación de gráficos, un desafío NP-difícil reconocido, es clave para crear gráficos visualmente atractivos. El equipo de Terrastruct ha publicado un excelente  profundizando en este tema. Inspirado significativamente por los algoritmos de diseño de DagreJS y el revelador artículo "   ¹", desarrollé una variante en Rust.   entrada en el blog Una técnica para dibujar gráficos dirigidos  Esta versión es particularmente efectiva para representar gráficos jerárquicos, aprovechando las intrincadas complejidades de este problema.  La renderización de DAG grandes (más de 500 nodos/bordes) tiende a ser algo lenta con Graphviz. Dagre + D3 (  y derivados) terminan siendo un poco más rápidos y ofrecen excelentes animaciones y personalizaciones de estilo. Sin embargo, sentí que se pierden las características que proporciona el lenguaje DOT, es decir, los atributos de estilo a menudo solo se respetan si se renderiza con Graphviz.   d3-graphviz  producirá resultados muy similares a Dagre pero más alineados con la especificación DOT y los comportamientos de estilo de Graphviz. Sin embargo, no tiene paridad de características con Graphviz, y las declaraciones/atributos que no son compatibles simplemente se ignoran.   vizdom  Creo que es un buen compromiso para los tipos de atributos que consumirá el DOT generados mediante programación.  Características de Vizdom  🚀 Representación increíblemente rápida  💾 Almacenar gráficos en enlaces  0️⃣ Cero dependencias y no requiere instalación  Velocidad de renderizado  Bueno, es una comparación de manzanas con naranjas. Graphviz todavía produce   visualizaciones y admite más  , entonces estoy comparando subjetivamente  contra el motor DOT de Graphviz, reduciéndolo a solo DAG, y aún   reduciéndolo a una lista de características limitadas del lenguaje DOT. excelentes   motores de diseño   vizdom más  Sí, sé que es terrible comparar años de experiencia y herramientas en torno a la racha de más de 30 años que es Graphviz, pero para mi caso de uso limitado, es increíblemente rápido. Aquí hay algunos tiempos de pared en mi Macbook Pro M1 para renderizar  con ~400 nodos:   un gráfico bastante grande  Graphviz nativo: ~30 segundos  Chrome (WASM) Graphviz: falla*  Chrome (Javascript) DagreJS: ~10 segundos     Cromo (WASM)   vizdom :  ~1 segundo**       * Se bloquea porque el indicador de emscripten, ALLOW_MEMORY_GROWTH=1 , no está configurado, lo que limita la memoria total a 16 MB. Esto se puede solucionar, pero no he encontrado un proyecto en línea que pueda manejar el gráfico en cuestión.         ** El gráfico de ejemplo se representa seleccionando Example 14 en la vista del editor. Actualizar la página hará que la actualice y obtenga un 414 porque el URI que persiste en el gráfico es demasiado grande. Estoy trabajando en una mejor solución para almacenar gráficos más grandes.  Almacenar gráficos en enlaces  Notará que cuando realiza cambios en el archivo DOT, la URL actualiza inmediatamente algunos parámetros de consulta para almacenar el gráfico y las opciones de diseño, lo que le permite siempre hacer referencia a una copia de sus datos simplemente almacenando el enlace.  Hay un problema: los gráficos grandes tienden a hacer que el URI sea demasiado grande para AWS (donde  está alojado actualmente) y otros balanceadores de carga.   vizdom  Actualmente estoy trabajando en una solución para manejar gráficos más grandes, pero mientras tanto, he incluido algunas formas de conservar y almacenar gráficos:  Copie un enlace incrustable que muestre automáticamente una vista que maximice el gráfico.  Copie un fragmento de iframe para incrustarlo en cualquier aplicación que admita su renderización.  O simplemente descargue el SVG renderizado.  A continuación se muestra un ejemplo de cómo se ve la vista del editor del  :   traza pprof para desinflar Vaya a la   y cargue  Vista del editor Example 42  Vista diferencial  De vez en cuando, me encontraba tratando de comparar dos gráficos que había generado, así que mientras lo hacía, agregué un  para ver visualmente los cambios entre dos gráficos diferentes.   visor de diferencias  Leyenda de colores:  Rojo: eliminado  Naranja: Modificado  Verde: Añadido  Aquí hay algunas instantáneas:   Haga clic en mí: cambiar un ID de nodo de “e” a “f” Haga clic en mí: agregando "cluster=true"  Dirección futura  Todavía es un trabajo en progreso y, a medida que continúa evolucionando, soy consciente de que el viaje para perfeccionar esta herramienta es tan dinámico como el campo de la visualización de gráficos en sí. Si bien estoy orgulloso de lo que  ha logrado hasta ahora, estoy aún más entusiasmado con su potencial. Ahí es donde entra usted, el lector y usuario potencial.   vizdom   vizdom  Si tiene algún comentario, no dude en enviarme un mensaje a  o  .   gitter   Discordia  Gracias por leer. Si te gustó este artículo, ¡   ! síguelo  [1]: ER Gansner, E. Koutsofios, SC North y K. . -PAG. Vo, “Una técnica para dibujar gráficos dirigidos”, en IEEE Transactions on Software Engineering, vol. 19, núm. 3, págs. 214–230, marzo de 1993, doi: 10.1109/32.221135.   También publicado  aquí

This post provides insights into new product. 

This story contains new, firsthand information uncovered by the writer.

Render DAGs with Vizdom

Read My Stories

Este audio es producido en el idioma original de la historia!

He aquí por qué no debería utilizar Graphviz para DAG: qué debería utilizar en su lugar

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps