D2 (herramienta de diagramas desde texto) ahora admite renderizado ASCII

• En la versión 0.7.1 de D2 se añadió la capacidad de renderizar diagramas de texto en ASCII
• Se pueden usar diagramas ASCII simples en comentarios de código para explicar el flujo de funciones o clases
• De forma predeterminada, usa caracteres Unicode pero con una bandera de opción se puede elegir ASCII estándar
• Esta función está en fase alfa y no admite algunos estilos, caracteres especiales ni ciertas figuras
• Es posible probar directamente el renderizado ASCII en D2 Playground y en la extensión para Vim, entre otros

---

Introducción al renderizado ASCII de D2

Desde el lanzamiento más reciente de D2 (versión 0.7.1), se añadió la salida ASCII para diagramas de texto.
Los archivos de salida con extensión .txt se renderizan automáticamente con el renderizador ASCII.
Se puede ver un ejemplo en la extensión de D2 para Vim; al abrir un archivo .d2 y guardar desde la ventana de vista previa, es posible ver en tiempo real la salida del diagrama ASCII.

Uso en la documentación de código

Los diagramas ASCII son más prácticos cuando se insertan en comentarios del código fuente.

• Si agregas un diagrama simple junto a una función o clase pequeña, puede ayudar a entender el código de forma más intuitiva que una explicación del flujo
• En la extensión de Vim, se puede escribir código D2 y convertir de inmediato la selección en un diagrama ASCII

Elección entre Unicode y ASCII estándar

El renderizado ASCII predeterminado usa caracteres Unicode de dibujo de cajas para ofrecer una salida más agradable visualmente.

• Si buscas máxima portabilidad, también se puede renderizar con caracteres ASCII comunes mediante la bandera de opción --ascii-mode=standard

Limitaciones actuales

Esta función de renderizado ASCII está en fase alfa.

• Puede haber muchos casos límite, puntos de mejora y errores
• Se anima a enviar reportes de errores o comentarios en el sitio web

Limitaciones principales

• Sin soporte para estilos
  • Las animaciones, fuentes y similares no tienen sentido en ASCII
  • Más adelante se planea evaluar soporte para algunos estilos limitados, como colores de terminal
  • Los temas tampoco son compatibles
  • double-border, multiple y otros están en la lista de mejoras futuras
• Espaciado irregular
  • Durante la conversión a ASCII, la disposición de las cajas puede volverse más irregular que en SVG
• Elementos que no se pueden renderizar
  • Aún no está implementado el soporte para textos especiales como Markdown, Latex o código
  • No se pueden renderizar imágenes e íconos, clases UML, tablas SQL, etc.
  • Más adelante se decidirá si estos elementos se eliminan o se muestran como marcadores de posición
• Algunas figuras no son compatibles
  • Las figuras curvas, como nubes o círculos, no se representan bien en ASCII
  • Esas figuras se reemplazan por rectángulos y se distinguen por tipo con un pequeño ícono en la esquina superior izquierda

Pruébalo directamente

Esta función se puede usar de inmediato en D2 Playground.

• Puedes abrir el bloque de código proporcionado y probar tú mismo el renderizado ASCII

[GN⁺]

Comentarios en Hacker News

• Hola, desarrolladores. Quiero compartir una nueva función que agregué esta mañana. Todavía está en fase alfa y ya apareció un issue en GitHub. Si quieren saltarse la entrada del blog e ir directo a verla, pueden hacerlo aquí. También pueden ver un ejemplo más grande en este enlace

  • En el playground se renderiza como texto negro sobre fondo negro, así que pensé que no funcionaba. Probablemente es porque tengo activado el modo oscuro. Los otros renderers sí funcionan, pero el ASCII no se ve
  • Me pregunto si en el TFA esto simplemente significa que se reduce desde ELK. Para usar esta función, ¿hay que configurar ELK explícitamente, o se activa automáticamente al exportar como .txt? Ya uso ELK para mis diagramas en D2

• Me pregunto qué valor aporta frente a mermaid. Me gusta el diseño y cómo funciona, pero quisiera saber si hay una razón práctica para cambiarse desde mermaid. Además, siento que este tipo de herramientas por lo general carecen de la posibilidad de ajustar manualmente la posición y el tamaño de las cajas con valores x/y en los resultados generados automáticamente

  • Depende de qué valoras. Para algunas personas, las dos cosas que mencionaste son suficientes, y para gente como nosotros también importa que al renderizar SVG desde el CLI no se necesite un navegador Chromium (caso relacionado). No muestra todas las diferencias, pero también hay un sitio de comparación breve. Y, sin querer hacer publicidad de un producto de pago, si necesitas ajustes manuales para fijar posición y tamaño, el IDE lo ofrece

• Aunque la sintaxis de D2 es muy atractiva, hasta ahora había usado más Mermaid por su tooling. Pero esta función sí es algo grande y nuevo, algo que nunca había visto en Mermaid. También crea una buena conexión con asciiflow.com

• Está buena la función de convertir desde ASCII. Pero me pregunto cómo se recupera el código fuente original en D2 cuando hay que actualizar el diagrama

• D2 siempre me ha gustado más que mermaid, pero en mi opinión el grid layout queda prácticamente inútil por el siguiente issue (issue relacionado). Si al final hay que ajustar píxeles manualmente, es como perder el propósito de este tipo de herramientas

  • ¡Gracias! Qué bueno que lo mencionaste. Está previsto para la 0.7.2 (la próxima release)

• He mantenido y compartido varias veces una lista de herramientas de texto a diagrama basadas en navegador. Algo que descubrí recientemente es que la versión en línea de D2 no corre de forma puramente local en el navegador, sino que un servidor backend genera los diagramas. Me pregunto si D2 puede funcionar completamente solo en el cliente (navegador) y si la extensión mencionada en este artículo también funciona offline

  • ¡Ahora sí puede! (desde hace una semana) Si revisas la pestaña de red del playground de D2, verás que funciona con d2.js, un wrapper sobre el port wasm de D2. Todavía no se ha lanzado oficialmente, pero pronto anunciaremos su separación
  • ~~Iba a preguntar si podía ver la lista~~ edición: ¡ya la encontré! Gracias

• Ojalá hicieran un repository oficial de Python. Quiero usarlo en notebooks, pero ahora mismo me obliga a usar Databricks y eso es incómodo

• Se ve realmente genial. ¡También vi la publicación anterior sobre soporte para C4! Pronto voy a necesitar modelado C4, así que planeo revisarlo

• Es una función realmente genial. Nunca había oído hablar de D2, pero me encanta que puedas hacer gráficos directo en la terminal y también renderizarlos bonito. Planeo probarlo muy pronto

  • D2 ya soporta una función para actualizar .svg en vivo mediante un servidor HTTP en tiempo real. Si pones el navegador y vim lado a lado, también puedes ver actualizaciones en tiempo real. Descubrí D2 hace un año y desde entonces lo uso para todos mis diagramas
  • Normalmente uso Moondraw para diagramas ASCII, pero si ya estás en un entorno de vim, esta herramienta es mucho mejor

• La extensión de vim está increíble

  • Aunque es raro y un poco decepcionante que esté escrita en vimscript