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.

Tabla de contenidos

1 Mermaid
2 Excalidraw
3 diagrams.net
4 Excalidraw y diagrams.net
5 Recursos

Mermaid

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

Mermaid es una herramienta de creación de gráficos y diagramas varios, a partir de una sintaxis de texto basada en Markdown. En otras palabras, podemos crear y modificar una gran gama de diagramas y gráficos usando texto.

Mermaid está basado en JavaScript, y es libre, bajo licencia MIT.

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.

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 |

Excalidraw es una pizarra virtual libre (open source) y gratuita de uso en línea, para crear diagramas, esquemas, bocetos, dibujos a mano alzada y otros.

Excalidraw es potente, intuitivo y fácil de usar.

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

diagrams.net

diagrams.net, anterioemente llamado draw.io, es una poderosa herramienta de creación de diagramas, gratuita y libre bajo licencia , creada en HTML y JavaScript.

Diagramas de flujo, UML, esquemas, organigramas, mapas mentales, … y mucho más.

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

Integración con servicios cloud como Dropbox y GitLab.com.
Disponible como plugin para incrustarlo como web app en plataformas como Nextcloud o MediaWiki.

Excalidraw y diagrams.net

diagrams.net, antiguamente draw.io, es una también potente herramienta para el dibujo de diagramas profesionales.

diagrams.net puede utilizarse en línea, a través de un navegador web, o bien descargar e instalar la versión de escritorio para la plataforma.

Excalidraw está principalmente enfocado en proporcionar funcionalidades de dibujo simple y minimalista, con la posibilidad de dibujar a mano, fácil y rápidamente.

Recursos

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