Diagramas, gráficos y esquemas. Aplicaciones de representación visual

El siguiente es un listado de aplicaciones libres (open source), de entre las más notables para la creación de Diagramas, gráficos y esquemas.

No todas compiten en el mismo terreno, por lo que es difícil conceder una aplicación ganadora. en lugar de eso, este artículo le guiará para el uso más adecuado para cada situación o tipo de diagrama.

diagrams.net

diagrams.net está disponible en línea como web app, para uso en cualquier navegador, y también como aplicación de escritorio para Linux, Windows y MacOS. Es una alternativa libre y potente al Visio, siendo muy probablemente su mejor opción actual.

A pesar de que diferentes aplicaciones para diagramas se complementan, al tener cada una sus fuertes, diagrams.net es mi primera recomendación si desea una aplicación versátil, potente, y 100% libre.

Se trata de una aplicación propósito general, es decir, que permite muchos tipos distintos de diagramas: flujo, UML, redes, árboles, organigramas, mapas mentales, BPMN, … y mucho más.

De entre las presentadas, diagrams.net es la aplicación más potente, versátil y completa. Se integra fácilmente con sistemas de archivos locales, Nextcloud, GitHub, etc. Ideal para mapas mentales, organigramas, redes, BPMN, etc.

Puede utilizarse en línea, con cualquier navegador web, o bien instalarla en entorno local en Linux, Windows y Mac OS.

• Permite trabajar localmente sin depender de la nube.
• Tiene buena integración con Nextcloud, GitHub, GitLab, etc.
• Exporta bien a PNG, SVG, PDF.
• No tiene dependencia con Google u otros servicios cerrados.
• Disponible como plugin para incrustarlo como web app en plataformas como Nextcloud o MediaWiki.

Mermaid

| Sitio web del proyecto | Sintaxis de Mermaid | Editor Live de Mermail |

Mermaid está basado en JavaScript, y es libre, bajo licencia MIT. Es más fácil de aprender que PlantUML y es ampliamente adoptado.

Mermaid renderiza texto y lo convierte en diagramas. Funciona en un navegador web o en un editor Markdown que soporte la sintaxis de mermaid.

De aprendizaje fácil, incluso para no iniciados en a Markdown ni a la programación. Para facilitar aun mas este aprendizaje, el Editor Live de Mermail será una gran herramienta de ayuda.

• Se renderiza en el navegador.
• Permite crear diagramas de Gant, de clases, entidad-relación, de secuencia, mapas mentales, de flujo, gráficos XY y circulares, … y otros.
• Diagramas exportables como PNG, SVG, Markdown, …

Todo lo expuesto, junto con la capacidad de integrarse fácilmente en documentos Markdown lo hace una herramienta interesantísima, y esencial en el plan de acción para crear un sistema de notas entrelazadas Markdown, y metodologías de productividad como Zettelkasten.

Formas de usar Mermaid

• Utilizando el editor Live. Esta es una forma muy fácil de generar diagramas y gráficos.
• Usando el editor de gráficos
• Uso de plugins/complementos e integraciones de Mermaid. Ver más adelante Integración con otras aplicaciones
• Llamando a la API de JavaScript de Mermaid. Este método consiste en crear un archivo HTML con cualquier editor,
• Agregar Mermaid como dependencia.

Limitaciones de Mermaid

Mermaid tal vez no sea la mejor opción para diagramas altamente complejos o especializados. Hay herramientas más avanzadas de creación de diagramas.

Sin embargo, Mermaid es fácil de usar, su lenguaje de descripción de diagramar es, aunque propio, fácil y similar a Markdown.

Integración con otras aplicaciones

Entre otras muchas aplicaciones, existen paquetes y plugins para aplicaciones que se han tratado en este sitio web:

• ChatGPT. Mermaid proporciona un plugin para ChatGPT
• Atom dispone de los paquetes atom-mermaid package y language-mermaid, para previsualizar los diagramas escritos en esta sintaxis.
• GNU Emacs dispone del major mode y ob-mermaid.
• Vim dispone de la sintaxis oficial de Vim y ftplugin, y la sintaxis de diagramas de Vim

El editor live

[mermaid.js.org] Tan sencillo como escribir en el panel de código los elementos que conforman el diagrama o esquema, dándole sangrado izquierdo de acuerdo a su estructura jerárquica.

---
title: Hello Title
config:
  theme: base
  themeVariables:
    primaryColor: "#f7f9f9"
---

mindmap
  root((mermaid))
    Formas de usar mermaid
      Editor Live
      editor de gráficos
      plugins e integraciones
      API de JavaScript
      Agregar Mermaid como dependencia
    Tipos de diagramas
      diagramas de flujo
      diagramas de secuencia
      diagramas de clases
      diagramas de estado
      diagrmas entidad-relación
      diagramas de Gantt
      gráficos circulares
      gráficos de cuadrantes
      diagramas de requisitos
      diagramas Gitgraph (Git)
      diagramas C4
      mapas mentales

Excalidraw

Sitio de la aplicación | Documentación | Código fuente en GitHub |

Aunque es de uso en línea, por su naturaleza libre, liberado bajo licencia MIT, podríamos descargar el código fuente e instalarlo en un equipo. Sin embargo, la opción más versátil es el uso online, a través de navegador web.

Entre sus características:

• Dibujos Colaborativos. Permite la colaboración en tiempo real. Esto es, varios usuarios editando una pizarra o lienzo simultáneamente. Esto lo hace ideal para una serie de propósitos, como el trabajo remoto en equipo y la enseñanza online.
• Importación/exportación versátil. Permite la importación y exportación en formatos como PNG, SVG y JSON

PlantUML

PlantUML es la aplicación líder indiscutible para UML, secuencias detalladas, etc. Permite crear diagramas UML a partir de descripciones de texto simple.

Tiene su propia sintaxis. Es mucho más expresivo y versátil que, por ejemplo, Mermaid.

Comparativa y conclusiones

Utilice diagrams.net para trabajar en un entorno gráfico, y crear una amplia variedad de diagramas con una sola aplicación.

Excalidraw, por otra pate, está principalmente enfocado en proporcionar funcionalidades de dibujo simple y minimalista, con la posibilidad de dibujar a mano, fácil y rápidamente. Úselo para bocetos, esquemas informales, …

Utilice PlantUML para diagrama complejos técnicos, UML, de secuencia, …

Mermaid es fácil de usar, ligero e ideal para Markdown lovers.

Recursos

• \@excalidraw/mermaid-to-excalidraw. Esta bilioteca pemite convertir la sintaxis de Mermaid en diagramas Excalidraw.