OdooWiki OCA HUB

Mermaid flowchart widget

web_widget_mermaid folder_open OCA/web open_in_new
Web Licencia: AGPL-3

Este módulo añade un widget básico para representar campos de texto como diagramas de flujo usando mermaid.

Traducción automática al español (DeepSeek) de la descripción original de OCA, que está en inglés.

auto_awesome Qué hace este módulo

Generado por IA a partir del código · Odoo 14.0

Añade un nuevo widget de campo que convierte el texto escrito en markdown de Mermaid en un diagrama de flujo o diagrama renderizado dentro de los formularios de Odoo. Los desarrolladores pueden usarlo en cualquier campo de texto estableciendo widget="mermaid".

Este módulo proporciona un nuevo widget de campo llamado mermaid que se puede aplicar a campos de texto en formularios de Odoo. Cuando un campo utiliza este widget, su contenido de texto se interpreta como Mermaid markdown y se muestra como un diagrama renderizado (flowchart, diagrama de secuencia, diagrama de Gantt, etc.) en lugar de texto plano.

  • El widget es de renderizado de solo lectura: toma el valor de texto almacenado y dibuja el diagrama en el formulario.
  • Si la sintaxis de Mermaid no es válida, se muestra un mensaje de error junto al campo en lugar de un diagrama roto.
  • Se aplica una configuración predeterminada (tema, diseño, fuentes, formato de fecha) que se puede sobrescribir por campo a través de las opciones del campo.
  • El módulo incluye una demo que añade una página "Mermaid flowchart" al formulario de usuario (res.users) con un diagrama de ejemplo, para que puedas ver cómo funciona.

El widget se registra en el registro de campos del cliente web y sus assets (JavaScript y hoja de estilos) se cargan en el backend. No añade ningún menú nuevo ni lógica de negocio; es una herramienta de presentación para desarrolladores que quieren mostrar diagramas desde campos de texto.

Depende de

web

Texto generado por IA (DeepSeek) al leer el código de la versión 14.0 en GitHub; puede contener errores, así que verifícalo en el código antes de decidir. Ver el código en GitHub

Disponibilidad por versión

Revisado: 2026-11-03
Confirmado (verificado en repositorio y rama) Estimado (sin verificar) Sin información

Estado de confirmación: 2 confirmadas, 7 sin información de 9 versiones.

terminal Instalación y uso

Documentación de OCA · Odoo 14.0

Uso

Fuente · Odoo 14.0

Pon un atributo widget="mermaid" en las etiquetas de campo relevantes en la declaración de la vista:

<field name="flowchart" widget="mermaid"/>

Opcionalmente, usa un atributo options para pasar un objeto JSON con la configuración de mermaid:

<field name="flowchart"
       widget="mermaid"
       options='{"theme": "forest", "gantt": {"fontSize": 14}}'/>

La sintaxis para crear diagramas se describe en la documentación de mermaid.

Como ejemplo, este texto:

graph LR
    10.0 --> 11.0
    11.0 --> 12.0
    12.0 -.-> 13.0

Produce este diagrama de flujo:

Demostración

En modo demo, el addon añade un campo de diagrama de flujo a los usuarios para que puedas probarlo. Esto aparece en las instancias de Runbot.

Actualizar Mermaid

Esta información solo es relevante para el desarrollo de este addon, no para los usuarios.

Este addon usa una compilación ligeramente modificada de Mermaid que funciona en navegadores antiguos. Para reproducirla, sigue estos pasos:

  • Clona https://github.com/knsv/mermaid/
  • Haz checkout de la versión a la que quieras actualizar (p. ej. git checkout 8.4.0)
  • En webpack.config.base.js, en const jsRule = ..., elimina la clave include (para que todas las dependencias se transpilen)
  • En babel.config.js, en targets, añade algunos navegadores además de node: 'current'. Yo elegí arbitrariamente esto:
targets: {
  node: 'current',
  ie: '11',
  edge: '20',
  firefox: '35',
  chrome: '45',
  safari: '9',
}
  • Ejecuta yarn install
  • Ejecuta yarn build
  • El archivo completado está ahora en dist/mermaid.js. Intenta ejecutar grep 'let ' dist/mermaid.js para asegurarte de que todo se transpiló. La única salida debería ser de los comentarios.
  • Copia dist/mermaid.js a web_widget_mermaid/static/lib/mermaid/mermaid.js.
  • Sube el número de versión en __manifest__.py para que coincida con la versión de Mermaid.

Traducción automática al español (DeepSeek) de la documentación original de OCA; los comandos y el código no se traducen. Sin información verificada en OCA: Instalación, Configuración.

info

Datos importados de GitHub: esta ficha refleja la última revisión del catálogo, no una consulta en directo. Verifica siempre en la documentación del módulo y en staging antes de instalar en producción.