Mermaid

Genera diagramas a partir de texto similar a Markdown.

📖 Documentación | 🚀 Comenzar | 🌐 CDN | 🙌 Únete

Prueba vistas previas de futuras versiones en el Editor en Vivo: Develop | Next

:trophy: ¡Mermaid fue nominado y ganó los JS Open Source Awards (2019) en la categoría "El uso más emocionante de la tecnología"!!!

¡Gracias a todos los involucrados, personas que envían pull requests, personas que responden preguntas! 🙏

Tabla de contenido

Expandir contenido

Acerca de
Ejemplos
Lanzamiento
Proyectos relacionados
Colaboradores
Seguridad y diagramas seguros
Reportar vulnerabilidades
Agradecimientos

Acerca de

Mermaid es una herramienta de diagramación y gráficos basada en JavaScript que utiliza definiciones de texto inspiradas en Markdown y un renderizador para crear y modificar diagramas complejos. El propósito principal de Mermaid es ayudar a que la documentación se mantenga al ritmo del desarrollo.

Doc-Rot es una paradoja que Mermaid ayuda a resolver.

La diagramación y documentación consumen un valioso tiempo de los desarrolladores y se desactualizan rápidamente. Pero no tener diagramas o documentación arruina la productividad y perjudica el aprendizaje organizacional.
Mermaid resuelve este problema permitiendo a los usuarios crear diagramas fácilmente modificables. También puede ser parte de scripts de producción (y otros fragmentos de código).

Mermaid permite que incluso personas sin conocimientos de programación creen diagramas detallados fácilmente a través del Editor en Vivo de Mermaid.
Para tutoriales en video, visita nuestra página de Tutoriales. Usa Mermaid con tus aplicaciones favoritas, consulta la lista de Integraciones y Usos de Mermaid.

También puedes usar Mermaid dentro de GitHub así como en muchas de tus aplicaciones favoritas—consulta la lista de Integraciones y Usos de Mermaid.

Para una introducción más detallada a Mermaid y algunos de sus usos más básicos, consulta la Guía para Principiantes, Uso y Tutoriales.

Nuestras pruebas de regresión visual de PR están impulsadas por Argos con su generoso plan Open Source. Hace que el proceso de revisión de PRs con cambios visuales sea muy sencillo.

En nuestro proceso de lanzamiento confiamos mucho en las pruebas de regresión visual usando applitools. Applitools es un excelente servicio que ha sido fácil de usar e integrar con nuestras pruebas.

Bot de IA de Mermaid

El bot Mermaid te ayudará a entender mejor este repositorio. Puedes pedir ejemplos de código, guía de instalación, ayuda para depuración ¡y mucho más!

Ejemplos

A continuación se muestran algunos ejemplos de los diagramas, gráficos y esquemas que se pueden crear con Mermaid. Haz clic aquí para ir directamente a la sintaxis de texto.

Diagrama de flujo [docs - editor en vivo]

flowchart LRA[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

flowchart LRA[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

Diagrama de secuencia [docs - editor en vivo]

sequenceDiagram
Alice->>John: Hello John, how are you?
loop HealthCheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

sequenceDiagram
Alice->>John: Hello John, how are you?
loop HealthCheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

Diagrama de Gantt [docs - editor en vivo]

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

Diagrama de clases [docs - editor en vivo]

classDiagram
Class01 <|-- AveryLongClass : Cool
<> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <>
  int id
  size()
}

classDiagram
Class01 <|-- AveryLongClass : Cool
<> Class01
Class09 --> C2 : ¿Dónde estoy?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <>
  int id
  size()
}

Diagrama de estados [docs - editor en vivo]

stateDiagram-v2
[*] --> Quieto
Quieto --> [*]
Quieto --> EnMovimiento
EnMovimiento --> Quieto
EnMovimiento --> Choque
Choque --> [*]

stateDiagram-v2
[*] --> Quieto
Quieto --> [*]
Quieto --> EnMovimiento
EnMovimiento --> Quieto
EnMovimiento --> Choque
Choque --> [*]

Gráfico de pastel [docs - editor en vivo]

pie
"Perros" : 386
"Gatos" : 85.9
"Ratas" : 15

pie
"Perros" : 386
"Gatos" : 85.9
"Ratas" : 15

Gráfico Git [experimental - editor en vivo]

gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit

gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit

Gráfico de barras (usando diagrama de gantt) [docs - editor en vivo]

gantt title Git Issues - días desde la última actualización dateFormat X axisFormat %s

section Issue19062 71 : 0, 71 section Issue19401 36 : 0, 36 section Issue193 34 : 0, 34 section Issue7441 9 : 0, 9 section Issue1300 5 : 0, 5

gantt title Git Issues - días desde la última actualización dateFormat X axisFormat %s

section Issue19062 71 : 0, 71 section Issue19401 36 : 0, 36 section Issue193 34 : 0, 34 section Issue7441 9 : 0, 9 section Issue1300 5 : 0, 5

Diagrama de User Journey [docs - editor en vivo]

  journey
    title Mi día laboral
    section Ir al trabajo
      Preparar té: 5: Yo
      Subir las escaleras: 3: Yo
      Trabajar: 1: Yo, Gato
    section Ir a casa
      Bajar las escaleras: 5: Yo
      Sentarse: 3: Yo

  journey
    title Mi día laboral
    section Ir al trabajo
      Preparar té: 5: Yo
      Subir las escaleras: 3: Yo
      Trabajar: 1: Yo, Gato
    section Ir a casa
      Bajar las escaleras: 5: Yo
      Sentarse: 3: Yo

Diagrama C4 [docs]

C4Context
title Diagrama de Contexto de Sistema para Sistema de Banca por Internet
Person(customerA, "Cliente Bancario A", "Un cliente del banco, con cuentas bancarias personales.")
Person(customerB, "Cliente Bancario B")
Person_Ext(customerC, "Cliente Bancario C")
System(SystemAA, "Sistema de Banca por Internet", "Permite a los clientes ver información sobre sus cuentas bancarias y realizar pagos.")
Person(customerD, "Cliente Bancario D", "Un cliente del banco, 
 con cuentas bancarias personales.")
Enterprise_Boundary(b1, "LímiteDelBanco") {
  SystemDb_Ext(SystemE, "Sistema Bancario Mainframe", "Almacena toda la información bancaria principal sobre clientes, cuentas, transacciones, etc.")
  System_Boundary(b2, "LímiteDelBanco2") {
    System(SystemA, "Sistema Bancario A")
    System(SystemB, "Sistema Bancario B", "Un sistema del banco, con cuentas bancarias personales.")
  }
  System_Ext(SystemC, "Sistema de correo electrónico", "El sistema interno de correo electrónico Microsoft Exchange.")
  SystemDb(SystemD, "Base de Datos Sistema Bancario D", "Un sistema del banco, con cuentas bancarias personales.")
  Boundary(b3, "LímiteDelBanco3", "límite") {
    SystemQueue(SystemF, "Cola Sistema Bancario F", "Un sistema del banco, con cuentas bancarias personales.")
    SystemQueue_Ext(SystemG, "Cola Sistema Bancario G", "Un sistema del banco, con cuentas bancarias personales.")
  }
}BiRel(customerA, SystemAA, "Usa")
BiRel(SystemAA, SystemE, "Usa")
Rel(SystemAA, SystemC, "Envía correos electrónicos", "SMTP")
Rel(SystemC, customerA, "Envía correos electrónicos a")

C4Context title Diagrama de Contexto de Sistema para Sistema de Banca por Internet Person(customerA, "Cliente Bancario A", "Un cliente del banco, con cuentas bancarias personales.") Person(customerB, "Cliente Bancario B") Person_Ext(customerC, "Cliente Bancario C") System(SystemAA, "Sistema de Banca por Internet", "Permite a los clientes ver información sobre sus cuentas bancarias y realizar pagos.") Person(customerD, "Cliente Bancario D", "Un cliente del banco, con cuentas bancarias personales.")

Enterprise_Boundary(b1, "LímiteDelBanco") {

markdown SystemDb_Ext(SystemE, "Sistema Principal de Banca Mainframe", "Almacena toda la información bancaria central sobre clientes, cuentas, transacciones, etc.")

System_Boundary(b2, "LímiteBancario2") { System(SystemA, "Sistema Bancario A") System(SystemB, "Sistema Bancario B", "Un sistema del banco, con cuentas bancarias personales.") }

System_Ext(SystemC, "Sistema de correo electrónico", "El sistema interno de correo electrónico Microsoft Exchange.") SystemDb(SystemD, "Base de Datos del Sistema Bancario D", "Un sistema del banco, con cuentas bancarias personales.")

Boundary(b3, "LímiteBancario3", "límite") { SystemQueue(SystemF, "Cola del Sistema Bancario F", "Un sistema del banco, con cuentas bancarias personales.") SystemQueue_Ext(SystemG, "Cola del Sistema Bancario G", "Un sistema del banco, con cuentas bancarias personales.") } }

BiRel(customerA, SystemAA, "Usa") BiRel(SystemAA, SystemE, "Usa") Rel(SystemAA, SystemC, "Envía correos electrónicos", "SMTP") Rel(SystemC, customerA, "Envía correos electrónicos a")

Lanzamiento Para quienes tienen permiso para hacerlo:

Actualice el número de versión en package.json.

sh npm publish

El comando anterior genera archivos en la carpeta dist y los publica en . Proyectos relacionados Interfaz de Línea de Comandos Editor en Vivo Servidor HTTP Contribuidores Mermaid es una comunidad en crecimiento y siempre está aceptando nuevos contribuidores. ¡Hay muchas maneras diferentes de ayudar y siempre estamos buscando manos extra! Mire este issue si quiere saber por dónde empezar a colaborar. Puede encontrar información detallada sobre cómo contribuir en la guía de contribución Seguridad y diagramas seguros Para sitios públicos, puede ser arriesgado recuperar texto de usuarios en Internet y almacenar ese contenido para mostrarlo posteriormente en un navegador. La razón es que el contenido del usuario puede contener scripts maliciosos incrustados que se ejecutarán cuando se presente la información. Para Mermaid esto es un riesgo, especialmente porque los diagramas Mermaid contienen muchos caracteres que se utilizan en html, lo que hace que la sanitización estándar no sea usable ya que también rompe los diagramas. Aún así, hacemos un esfuerzo por sanear el código entrante y seguimos refinando el proceso, pero es difícil garantizar que no haya fallos de seguridad. Como un nivel extra de seguridad para sitios con usuarios externos, nos complace presentar un nuevo nivel de seguridad en el que el diagrama se renderiza en un iframe aislado, evitando que se ejecute javascript en el código. Este es un gran paso adelante para una mejor seguridad. _Desafortunadamente, no se puede tener todo, lo que en este caso significa que parte de la funcionalidad interactiva se bloquea junto con el posible código malicioso._ Reporte de vulnerabilidades Para informar sobre una vulnerabilidad, por favor envíe un correo electrónico a con una descripción del problema, los pasos que siguió para crear el problema, las versiones afectadas y, si se conoce, las mitigaciones para el problema. Agradecimientos Una nota rápida de Knut Sveidqvist: _¡Muchas gracias a los proyectos d3 y dagre-d3 por proporcionar las bibliotecas de diseño gráfico y dibujo!_ > _Gracias también al proyecto js-sequence-diagram por el uso de la gramática para los diagramas de secuencia. Gracias a Jessica Peter por la inspiración y punto de partida para el renderizado de diagramas de Gantt._ > _Gracias a Tyler Long, quien ha sido colaborador desde abril de 2017._ > _¡Gracias a la lista cada vez mayor de contribuidores que han llevado el proyecto hasta aquí!_

_Mermaid fue creado por Knut Sveidqvist para una documentación más sencilla._

--- Tranlated By Open Ai Tx | Last indexed: 2025-06-12 ---

mermaid