mermaid
11.4.0
Genere diagramas a partir de texto tipo rebajas.
¡Editor en vivo!
Documentación | Empezando | CDN | ? Únase a nosotros
简体中文
Pruebe las vistas previas de Live Editor de futuras versiones: Desarrollar | Próximo
? ¡¡¡Mermaid fue nominada y ganó los premios JS Open Source Awards (2019) en la categoría "El uso más emocionante de la tecnología"!!!
¡Gracias a todos los involucrados, a las personas que realizan solicitudes de extracción y a las personas que responden preguntas!
Acerca de
Ejemplos
Liberar
Proyectos relacionados
Colaboradores
Diagramas de seguridad y salvo
Informar vulnerabilidades
Apreciación
Mermaid es una herramienta de creación de diagramas y gráficos basada en JavaScript que utiliza definiciones de texto inspiradas en Markdown y un renderizador para crear y modificar diagramas complejos. El objetivo principal de Mermaid es ayudar a que la documentación se ponga al día con el desarrollo.
Doc-Rot es un Catch-22 que Mermaid ayuda a resolver.
Los diagramas y la documentación cuestan un tiempo precioso al desarrollador y quedan obsoletos rápidamente. Pero no tener diagramas o documentos arruina la productividad y perjudica el aprendizaje organizacional.
Mermaid aborda este problema permitiendo a los usuarios crear diagramas fácilmente modificables. También puede formar parte de guiones de producción (y otras piezas de código).
Mermaid permite que incluso los no programadores creen fácilmente diagramas detallados a través del Mermaid Live Editor.
Para tutoriales en vídeo, visite nuestra página de tutoriales. Utilice Mermaid con sus aplicaciones favoritas, consulte la lista de integraciones y usos de Mermaid.
También puedes usar Mermaid dentro de GitHub, así como muchas de tus otras aplicaciones favoritas; consulta la lista de integraciones y usos de Mermaid.
Para obtener una introducción más detallada a Mermaid y algunos de sus usos más básicos, consulte la Guía, uso y tutoriales para principiantes.
Nuestra prueba de regresión visual de relaciones públicas está impulsada por Argos con su generoso plan de código abierto. Hace que el proceso de revisión de relaciones públicas con cambios visuales sea muy sencillo.
En nuestro proceso de lanzamiento, dependemos en gran medida de las pruebas de regresión visual utilizando applitools. Applitools es un gran servicio que ha sido fácil de usar e integrar con nuestras pruebas.
Los siguientes son algunos ejemplos de diagramas, cuadros y gráficos que se pueden hacer usando Mermaid. Haga clic aquí para saltar a la sintaxis del texto.
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2] diagrama de flujo LR
A[Difícil] -->|Texto| B (redondo)
B --> C{Decisión}
C -->|Uno| D[Resultado 1]
C -->|Dos| mi[Resultado 2] CargandosequenceDiagram 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 secuencia
Alice->>John: Hola John, ¿cómo estás?
bucle HealthCheck
John->>John: Lucha contra la hipocondría
fin
Nota a la derecha de Juan: ¡Pensamientos racionales!
John-->>Alice: ¡Genial!
John->>Bob: ¿Y tú?
Bob-->>John: ¡Muy bien! Cargandogantt 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
sección sección
Completado :done, des1, 2014-01-06,2014-01-08
Activo :activo, des2, 2014-01-07, 3d
Paralelo 1: des3, después de des1, 1d
Paralelo 2: des4, después de des1, 1d
Paralelo 3: des5, después de des3, 1d
Paralelo 4: des6, después de des4, 1d CargandoclassDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> 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 {
<<service>>
int id
size()
} diagrama de clase
Class01 <|-- AveryLongClass: Genial
<<Interfaz>> Clase01
Clase09 --> C2: ¿Dónde estoy?
Clase09 --* C3
Clase09 --|> Clase07
Clase07: es igual()
Clase07: Objeto [] elementoDatos
Clase01: tamaño()
Clase01: chimpancé int
Clase01: int gorila
clase Clase10 {
<<servicio>>
identificación interna
tamaño()
} CargandostateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
stateDiagram-v2
[*] --> Todavía
Todavía --> [*]
Todavía -> En movimiento
En movimiento --> Todavía
En movimiento --> Choque
Accidente --> [*] Cargandopie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
pastel
"Perros": 386
"Gatos": 85,9
"Ratas": 15 Cargandogantt title Git Issues - days since last update 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 Problemas de Git: días desde la última actualización
formato de fecha X
formato de eje %s
sección Número 19062
71: 0, 71
sección Número 19401
36: 0, 36
sección Número 193
34: 0, 34
sección Número 7441
9: 0, 9
sección Número 1300
5: 0, 5 Cargandojourney title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me
viaje
título Mi jornada laboral
sección Ir a trabajar
Hacer té: 5: Yo
Sube las escaleras: 3: Yo
Trabajar: 1: Yo, Gato
sección Ir a casa
Baja las escaleras: 5: Yo
Siéntate: 3: Yo CargandoC4Context
title System Context diagram for Internet Banking System
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to") C4Contexto
título Diagrama de contexto del sistema para el sistema de banca por Internet
Persona(clienteA, "Cliente bancario A", "Un cliente del banco, con cuentas bancarias personales.")
Persona(clienteB, "Cliente bancario B")
Person_Ext(clienteC, "Cliente bancario C")
Sistema(SystemAA, "Sistema de Banca por Internet", "Permite a los clientes ver información sobre sus cuentas bancarias y realizar pagos").
Persona(clienteD, "Cliente bancario D", "Un cliente del banco, <br/> con cuentas bancarias personales.")
Límite_empresa(b1, "Límite bancario") {
SystemDb_Ext(SystemE, "Sistema bancario central", "Almacena toda la información bancaria principal sobre clientes, cuentas, transacciones, etc.")
Límite_delSistema(b2, "LímiteBanco2") {
Sistema(SistemaA, "Sistema bancario A")
Sistema(SistemaB, "Sistema bancario B", "Un sistema del banco, con cuentas bancarias personales").
}
System_Ext(SystemC, "Sistema de correo electrónico", "El sistema de correo electrónico interno de Microsoft Exchange.")
SystemDb(SystemD, "Base de datos del sistema bancario D", "Un sistema del banco, con cuentas bancarias personales").
Límite(b3, "LímiteBanco3", "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(clienteA, SistemaAA, "Usos")
BiRel(SystemAA, SystemE, "Usos")
Rel(SystemAA, SystemC, "Envía correos electrónicos", "SMTP")
Rel(SystemC, clienteA, "Envía correos electrónicos a") CargandoPara aquellos que tengan permiso para hacerlo:
Actualice el número de versión en package.json .
publicar NPM
El comando anterior genera archivos en la carpeta dist y los publica en https://www.npmjs.com.
Interfaz de línea de comando
Editor en vivo
Servidor HTTP
Mermaid es una comunidad en crecimiento y siempre acepta nuevos contribuyentes. ¡Hay muchas formas diferentes de ayudar y siempre estamos buscando manos adicionales! Mire este número si quiere saber por dónde empezar a ayudar.
Puede encontrar información detallada sobre cómo contribuir en la guía de contribuciones.
Para los sitios públicos, puede resultar complicado recuperar texto de los usuarios en Internet y almacenar ese contenido para presentarlo en un navegador en una etapa posterior. La razón es que el contenido del usuario puede contener scripts maliciosos incrustados que se ejecutarán cuando se presenten los datos. Para Mermaid esto es un riesgo, especialmente porque los diagramas de sirena contienen muchos caracteres que se usan en HTML, lo que inutiliza el saneamiento estándar y también rompe los diagramas. Seguimos haciendo un esfuerzo para desinfectar el código entrante y seguir perfeccionando el proceso, pero es difícil garantizar que no haya lagunas.
Como nivel adicional de seguridad para sitios con usuarios externos, nos complace introducir un nuevo nivel de seguridad en el que el diagrama se representa en un iframe aislado evitando que se ejecute javascript en el código. Este es un gran paso adelante para una mayor seguridad.
Desafortunadamente no puedes comer un pastel al mismo tiempo, lo que en este caso significa que algunas de las funciones interactivas se bloquean junto con el posible código malicioso.
Para informar una vulnerabilidad, envíe un correo electrónico a [email protected] con una descripción del problema, los pasos que siguió para crearlo, las versiones afectadas y, si las conoce, las mitigaciones para el problema.
Una breve nota de Knut Sveidqvist:
¡Muchas gracias a los proyectos d3 y dagre-d3 por proporcionar el diseño gráfico y las bibliotecas de dibujos!
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 el punto de partida para el renderizado Gantt.
Gracias a Tyler Long, quien ha sido colaborador desde abril de 2017.
¡Gracias a la lista cada vez mayor de contribuyentes que llevaron el proyecto hasta aquí!
Mermaid fue creada por Knut Sveidqvist para facilitar la documentación.
