mermaid
11.4.0
Gere diagramas a partir de texto semelhante a markdown.
Editor ao vivo!
Documentação | Primeiros passos | CDN | ? Junte-se a nós
简体中文
Experimente as visualizações do Live Editor de versões futuras: Desenvolver | Próximo
? Mermaid foi indicada e ganhou o JS Open Source Awards (2019) na categoria “O uso mais emocionante da tecnologia”!!!
Obrigado a todos os envolvidos, pessoas que realizam pull requests, pessoas que respondem perguntas!
Sobre
Exemplos
Liberar
Projetos relacionados
Colaboradores
Diagramas de segurança e segurança
Relatando vulnerabilidades
Apreciação
Mermaid é uma ferramenta de diagramação e gráficos baseada em JavaScript que usa definições de texto inspiradas em Markdown e um renderizador para criar e modificar diagramas complexos. O principal objetivo do Mermaid é ajudar a documentação a acompanhar o desenvolvimento.
Doc-Rot é um Catch-22 que Mermaid ajuda a resolver.
A diagramação e a documentação custam um tempo precioso do desenvolvedor e ficam desatualizadas rapidamente. Mas não ter diagramas ou documentos prejudica a produtividade e prejudica o aprendizado organizacional.
O Mermaid resolve esse problema permitindo que os usuários criem diagramas facilmente modificáveis. Também pode fazer parte de scripts de produção (e outros trechos de código).
O Mermaid permite que até mesmo não programadores criem facilmente diagramas detalhados por meio do Mermaid Live Editor.
Para tutoriais em vídeo, visite nossa página de Tutoriais. Utilize o Mermaid com seus aplicativos favoritos, confira a lista de Integrações e Usos do Mermaid.
Você também pode usar o Mermaid no GitHub, bem como muitos de seus outros aplicativos favoritos - confira a lista de integrações e usos do Mermaid.
Para uma introdução mais detalhada ao Mermaid e alguns de seus usos mais básicos, consulte o Guia do Iniciante, Uso e Tutoriais.
Nosso teste de regressão visual PR é desenvolvido pela Argos com seu generoso plano de código aberto. Isso facilita muito o processo de revisão de PRs com mudanças visuais.
Em nosso processo de lançamento, contamos muito com testes de regressão visual usando applitools. Applitools é um ótimo serviço fácil de usar e integrado aos nossos testes.
A seguir estão alguns exemplos de diagramas, tabelas e gráficos que podem ser feitos usando o Mermaid. Clique aqui para pular para a sintaxe do texto.
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2] fluxograma LR
A[Difícil] -->|Texto| B (redondo)
B --> C{Decisão}
C -->|Um| D[Resultado 1]
C -->|Dois| E[Resultado 2] CarregandosequenceDiagram 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 sequência
Alice->>John: Olá John, como vai você?
loop HealthCheck
John->>John: Luta contra a hipocondria
fim
Nota à direita de João: Pensamentos racionais!
John-->>Alice: Ótimo!
John->>Bob: E você?
Bob -->>John: Muito bom! Carregandogantt 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
seção Seção
Concluído: concluído, des1, 06/01/2014,08/01/2014
Ativo: ativo, des2, 07/01/2014, 3d
Paralelo 1: des3, depois de des1, 1d
Paralelo 2: des4, depois de des1, 1d
Paralelo 3: des5, depois de des3, 1d
Paralelo 4: des6, depois de des4, 1d CarregandoclassDiagram
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 classe
Class01 <|-- AveryLongClass: Legal
<<Interface>> Classe01
Turma09 --> C2: Onde estou?
Classe09 --* C3
Aula09 --|> Aula07
Classe07: igual()
Classe07: Objeto[] elementoDados
Classe01: tamanho()
Classe01: chimpanzé interno
Classe01: gorila interno
classe Classe10 {
<<serviço>>
ID interno
tamanho()
} CarregandostateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
stateDiagram-v2
[*] --> Ainda
Ainda --> [*]
Ainda --> Movendo
Movendo-se -> Ainda
Movendo-se -> Crash
Falha --> [*] Carregandopie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
torta
"Cães": 386
"Gatos": 85,9
"Ratos": 15 Carregandogantt 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 do Git - dias desde a última atualização
formato de data X
formato do eixo %s
seção Edição 19062
71: 0, 71
seção Edição 19401
36: 0, 36
seção Edição 193
34: 0, 34
seção Edição 7441
9: 0, 9
seção Edição 1300
5: 0, 5 Carregandojourney 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
jornada
título Meu dia de trabalho
seção Vá trabalhar
Faça chá: 5: Eu
Suba as escadas: 3: Eu
Faça o trabalho: 1: Eu, Gato
seção Vá para casa
Desça: 5: Eu
Sente-se: 3: Eu CarregandoC4Context
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
title Diagrama de contexto do sistema para sistema de Internet Banking
Pessoa(clienteA, "Cliente bancário A", "Um cliente do banco, com contas bancárias pessoais.")
Pessoa(clienteB, "Cliente Bancário B")
Person_Ext(clienteC, "Cliente Bancário C")
Sistema(SystemAA, "Sistema de Internet Banking", "Permite que os clientes visualizem informações sobre suas contas bancárias e façam pagamentos.")
Person(customerD, "Banking Customer D", "Um cliente do banco, <br/> com contas bancárias pessoais.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Armazena todas as informações bancárias básicas sobre clientes, contas, transações, etc.")
System_Boundary(b2, "BankBoundary2") {
Sistema(SistemaA, "Sistema Bancário A")
Sistema(SystemB, "Sistema Bancário B", "Um sistema do banco, com contas bancárias pessoais.")
}
System_Ext(SystemC, "Sistema de e-mail", "O sistema de e-mail interno do Microsoft Exchange.")
SystemDb(SystemD, "Banking System D Database", "Um sistema do banco, com contas bancárias pessoais.")
Limite(b3, "BankBoundary3", "limite") {
SystemQueue(SystemF, "Banking System F Queue", "Um sistema do banco, com contas bancárias pessoais.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "Um sistema do banco, com contas bancárias pessoais.")
}
}
BiRel(clienteA, SystemAA, "Usos")
BiRel(SystemAA, SystemE, "Usos")
Rel(SystemAA, SystemC, "Envia e-mails", "SMTP")
Rel(SystemC, clienteA, "Envia e-mails para") CarregandoPara aqueles que têm permissão para fazê-lo:
Atualize o número da versão em package.json .
publicação npm
O comando acima gera arquivos na pasta dist e os publica em https://www.npmjs.com.
Interface de linha de comando
Editor ao vivo
Servidor HTTP
Mermaid é uma comunidade em crescimento e está sempre aceitando novos colaboradores. Há muitas maneiras diferentes de ajudar e estamos sempre em busca de mãos extras! Veja esta edição se quiser saber por onde começar a ajudar.
Informações detalhadas sobre como contribuir podem ser encontradas no guia de contribuições
Para sites públicos, pode ser precário recuperar texto de usuários na Internet, armazenando esse conteúdo para apresentação posterior em um navegador. A razão é que o conteúdo do usuário pode conter scripts maliciosos incorporados que serão executados quando os dados forem apresentados. Para o Mermaid isso é um risco, principalmente porque os diagramas da sereia contêm muitos caracteres que são usados em html, o que torna o saneamento padrão inutilizável, pois também quebra os diagramas. Ainda fazemos um esforço para higienizar o código recebido e continuar refinando o processo, mas é difícil garantir que não haja lacunas.
Como um nível extra de segurança para sites com usuários externos, temos o prazer de apresentar um novo nível de segurança no qual o diagrama é renderizado em um iframe em sandbox, evitando que o javascript no código seja executado. Este é um grande passo em frente para uma melhor segurança.
Infelizmente você não pode comer um bolo e comê-lo ao mesmo tempo, o que neste caso significa que algumas das funcionalidades interativas serão bloqueadas junto com o possível código malicioso.
Para relatar uma vulnerabilidade, envie um e-mail para [email protected] com uma descrição do problema, as etapas executadas para criá-lo, as versões afetadas e, se conhecidas, as mitigações para o problema.
Uma nota rápida de Knut Sveidqvist:
Muito obrigado aos projetos d3 e dagre-d3 por fornecerem o layout gráfico e as bibliotecas de desenho!
Obrigado também ao projeto js-sequence-diagram pelo uso da gramática para os diagramas de sequência. Obrigado a Jessica Peter pela inspiração e ponto de partida para a renderização de Gantt.
Obrigado a Tyler Long, que é colaborador desde abril de 2017.
Obrigado à lista cada vez maior de colaboradores que trouxeram o projeto até aqui!
Mermaid foi criado por Knut Sveidqvist para facilitar a documentação.
