Crear diagramas sin usar programas con Mermaid + Obsidian

Los diagramas ayudan a entender mejor cómo funciona un sistema.

Si escribes documentación en Markdown, Mermaid es una de las mejores herramientas para crear diagramas sin necesidad de usar programas de diseño.

En este video te muestro cómo funciona y cómo puedes usarlo en tus proyectos.

---

¿Qué es Mermaid?

Mermaid es una herramienta que convierte texto en diagramas. Solo escribes una pequeña sintaxis y automáticamente genera el gráfico. Es ideal para:

• Documentación técnica.
• Arquitecturas de software.
• Diagramas de flujo.
• Procesos.
• Relaciones entre componentes.

Además, funciona muy bien con archivos Markdown.

---

Puedes usar Mermaid en Obsidian

Si utilizas Obsidian, puedes instalar el plugin de Mermaid para visualizar los diagramas directamente dentro de tus notas.

Así toda tu documentación queda en un solo lugar y el diagrama se actualiza cada vez que modificas el código.

Más información en la documentación oficial:

https://mermaid.js.org/

---

Ejemplo de código Mermaid

flowchart TD

    subgraph AndroidApp["📱 Android App"]
    end

    subgraph Network["🌐 Network Layer"]
        API["REST API<br>s1"]
    end

    subgraph Backend["☁️ Google Apps Script Backend"]
        Server["Apps Script Server"]
        Sheets["Google Sheets"]
    end

    AndroidApp -- login --> Network
    API -- Forward to Server --> Server
    Server --> Sheets

    Server:::process
    Sheets:::process

    AndroidApp:::android
    Network:::network
    Backend:::backend

    classDef android stroke:#818cf8,fill:#eef2ff
    classDef network stroke:#38bdf8,fill:#f0f9ff
    classDef backend stroke:#4ade80,fill:#f0fdf4
    classDef process stroke:#facc15,fill:#fefce8

Con unas pocas líneas puedes representar la comunicación entre una aplicación Android, una API y el backend.

---

Sintaxis en Obsidian

Después de instalar el plugin, solo escribes el bloque Mermaid dentro de un archivo Markdown.

Así se ve el código:

---

Resultado generado

Una vez procesado el código, Mermaid genera automáticamente el diagrama.

---

¿Por qué me gusta Mermaid?

Lo uso principalmente porque:

• Es muy rápido.
• Los diagramas quedan junto a la documentación.
• Es fácil modificar un diagrama.
• Puedo exportarlo como imagen para compartirlo en blogs, documentación o presentaciones.
• Evito depender de herramientas de diseño para diagramas simples.

Cuando necesito compartir una arquitectura con otra persona, normalmente exporto el diagrama como imagen porque resulta mucho más práctico y portable.

---

Conclusión

Mermaid es una herramienta sencilla pero muy útil para cualquier desarrollador.

Si ya escribes documentación en Markdown, vale la pena incorporarla a tu flujo de trabajo para crear diagramas claros, fáciles de mantener y compartir.

Autor: Anibal Copitan ( Contactar con Anibal Copitan )