Flowchartio
Iniciar sesiónProbar gratisProbar

Diagramas Mermaid

Mermaid en Notion, Obsidian y herramientas de documentación

Notion y Obsidian muestran Mermaid de forma nativa a partir de un bloque de código configurado como Mermaid. Generadores de documentación como Docusaurus y MkDocs lo admiten mediante un complemento oficial o una extensión, mientras que Confluence suele necesitar una aplicación del marketplace.

Por Flowchartio · Actualizado el · 2 min de lectura

Notion

Añade un bloque de código, elige el lenguaje Mermaid y pega el diagrama. Notion permite ver el código, la vista previa o ambos, así que puedes mostrar solo el diagrama en la página. Es una forma práctica de tener un procedimiento y su diagrama en el mismo sitio, por ejemplo al convertir un procedimiento en diagrama de flujo.

Obsidian

Obsidian muestra los bloques de código marcados como mermaid en el modo de lectura y en la vista previa en vivo, sin complementos. Como las notas son archivos Markdown, el mismo diagrama se ve también si subes la bóveda a GitHub; consulta Mermaid en GitHub y GitLab.

Generadores de documentación

  • Docusaurus: activa el tema oficial de Mermaid y usa bloques mermaid en tus páginas.
  • MkDocs (tema Material): configura la extensión SuperFences con un bloque personalizado para Mermaid.
  • Wikis de Azure DevOps: usa la sintaxis de bloque Mermaid propia de la wiki (::: mermaid … :::).

Consulta la documentación de cada herramienta para la configuración exacta de tu versión.

Confluence

Confluence no muestra Mermaid de serie. Los equipos suelen instalar una aplicación de Mermaid desde el marketplace o insertar el diagrama como imagen. En ese caso, un SVG se mantiene nítido; consulta PNG, SVG o Mermaid.

Exportar desde una base de conocimiento

Si una página con un diagrama Mermaid se exporta a PDF o se comparte fuera de la herramienta, revisa cómo queda: algunas exportaciones conservan la imagen renderizada y otras solo el código. Ante la duda, adjunta también una exportación como imagen.

Consejos para bases de conocimiento

  • Un diagrama por sección, junto al texto que ilustra.
  • Los mismos nombres de carriles que en tu organigrama, para que se reconozca a los responsables.
  • Cuando cambie el proceso, edita el bloque de código en lugar de subir una imagen nueva.
  • Solo la sintaxis básica: no todas las herramientas incluyen la misma versión de Mermaid.

Para crear el diagrama, escríbelo con la chuleta de sintaxis o describe el proceso y expórtalo desde un generador con IA.