Processo Tipo
Expressão gráfica
Pensamento Tipo
Expressão estruturada
Anotações Tipo
Expressão eficiente
Mapa de árvore
Diagrama de colchetes
Modo padrão
Mermaid é uma ferramenta que gera diagramas a partir de uma sintaxe de texto. Ao escrever um código Mermaid simples, é possível gerar fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estado, diagramas ER, gráficos de Gantt, mapas mentais, diagramas de arquitetura e muitos outros tipos de diagrama.
Diferente das ferramentas tradicionais de desenho por arrastar e soltar, o Mermaid descreve principalmente os nós, as relações, a ordem temporal e a estrutura de dados de um diagrama por meio de código. Depois de alterar o código, o diagrama pode ser regenerado automaticamente, o que o torna especialmente adequado para documentação técnica, design de produto, gestão de projetos, desenvolvimento de software e organização do conhecimento.
Este artigo apresenta a sintaxe básica do Mermaid e reúne os tipos de diagrama que o editor Mermaid suporta para renderização, a sintaxe de declaração, exemplos de código e cenários de uso. Se você quiser escrever e visualizar código Mermaid diretamente online, pode testar gratuitamente o editor online Mermaid da ProcessOn.
Mermaid é uma ferramenta que gera diagramas usando uma sintaxe de texto. O código abaixo gera um fluxograma Mermaid simples:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
O resultado da renderização é o seguinte:
Onde: flowchart TD é usado para declarar a criação de um fluxograma organizado de cima para baixo.
A lógica de funcionamento do Mermaid pode ser resumida assim:
Escrever o código Mermaid → Analisar o código → Renderizar o diagrama → Alterar o código → o diagrama é atualizado em tempo real
Portanto, uma das chaves para aprender Mermaid é conhecer a sintaxe de declaração correspondente a cada tipo de diagrama.
Tipos de diagrama diferentes usam uma sintaxe de declaração Mermaid diferente, atualmente os diagramas Mermaid mais comuns incluem:
| Tipo de diagrama | Sintaxe de declaração Mermaid | Usos comuns |
| Fluxograma | flowchart | Processos de negócio, algoritmos, fluxos de trabalho |
| Diagrama de sequência | sequenceDiagram | Interação entre sistemas, chamadas de API |
| Diagrama de classes | classDiagram | Estrutura de software, modelagem orientada a objetos |
| Diagrama de estado | stateDiagram-v2 | Transição de estados, máquina de estados |
| Diagrama ER | erDiagram | Relacionamento entre entidades de banco de dados |
| Gráfico de Gantt | gantt | Planejamento de projetos, progresso de tarefas |
| Diagrama de jornada do usuário | journey | Experiência do usuário, jornada do cliente |
| Mapa mental | mindmap | Organização do conhecimento, brainstorming |
| Linha do tempo | timeline | Cronologia, eventos históricos |
| Gráfico de pizza | pie | Proporção, análise de composição |
| Gráfico de quadrantes | quadrantChart | Classificação, prioridade, análise de posicionamento |
| Diagrama Git | gitGraph | Ramificações, commits e mesclagens do Git |
| Diagrama de Sankey | sankey-beta | Dados, recursos, direção do fluxo |
| Gráfico XY | xychart-beta | Tendência de dados, comparação de valores |
| Gráfico de radar | radar | Comparação de indicadores multidimensionais |
| Diagrama C4 | C4Context etc. | Modelagem de arquitetura de software |
| Diagrama de arquitetura | architecture-beta | Arquitetura de sistemas, serviços e recursos |
| Diagrama kanban | kanban | Gestão de tarefas e do status do trabalho |
| Diagrama de blocos | block-beta | Módulos, estrutura e relações do sistema |
| Diagrama de pacotes | packet-beta | Estrutura de pacotes de rede |
| Diagrama de requisitos | requirementDiagram | Análise de requisitos e relações entre requisitos |
Diferentes versões de editores Mermaid podem ter suporte variável à sintaxe e aos recursos dos diagramas; no uso real, considere a sintaxe suportada pelo editor.
Sintaxe básica
Mermaid usa a declaração flowchart para criar fluxogramas. A forma mais simples:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
Resultado da renderização
Onde:
O fluxograma Mermaid também pode usar as direções LR (da esquerda para a direita), RL (da direita para a esquerda), BT (de baixo para cima) e outras configurações de direção. Por exemplo:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
Indica um fluxograma disposto da esquerda para a direita.
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| (text) | Retângulo arredondado | Representa o início, o fim ou uma operação geral de um processo |
| [text] | Retângulo | Representa uma etapa, tarefa ou processo específico |
| {text} | Losango | Representa uma decisão ou ramificação condicional |
| ((text)) | Círculo | Representa um ponto de conexão ou evento |
| [[text]] | Retângulo duplo | Representa a chamada de um subprocesso ou submódulo |
| [(text)] | Cilindro | Representa um nó de banco de dados |
| >text] | Forma assimétrica | Representa entrada/saída |
| [/text/] | Paralelogramo | Representa dados de entrada ou saída |
| --> | Seta | Representa a direção do fluxo do processo |
| --- | Linha sem seta | Representa uma relação de associação |
| -.-> | Seta tracejada | Representa um fluxo opcional ou uma relação de referência |
| ==> | Seta grossa | Representa um fluxo prioritário ou uma associação forte |
A sintaxe detalhada de criação de fluxogramas com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/flowchart
O fluxograma é adequado para processos de negócio, fluxos de trabalho, fluxos de algoritmos, fluxos de sistema e fluxos de decisão, conheça gratuitamente o editor online Mermaid para fluxogramas.
Sintaxe básica
Mermaid usa a declaração sequenceDiagram para criar diagramas de sequência. Exemplo mais simples:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| sequenceDiagram | Diagrama de sequência | Cria um diagrama de sequência |
| A->B: message | Linha contínua | Representa uma chamada de mensagem síncrona ou uma interação comum |
| A-->B: message | Linha tracejada | Representa uma mensagem de retorno ou uma interação de associação fraca |
| A->>B: message | Seta de linha contínua | Representa uma chamada de mensagem assíncrona |
| A-->>B: message | Seta tracejada | Representa uma resposta assíncrona ou mensagem de retorno |
| participant A | Participante | Define objetos, papéis ou sistemas que participam da interação |
| actor A | Ator | Representa participantes ativos, como usuários e sistemas externos |
| activate A | Caixa de ativação | Representa que o objeto começou a processar uma solicitação |
| deactivate A | Fim da ativação | Representa que o objeto concluiu o processamento atual |
| loop text | Caixa de loop | Representa uma interação executada repetidamente |
| alt text | Ramificação condicional | Representa caminhos de interação sob condições diferentes |
| opt text | Fluxo opcional | Representa uma interação que pode ser executada |
| par text | Caixa paralela | Representa várias operações executadas ao mesmo tempo |
A sintaxe detalhada de criação de diagramas de sequência com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/sequence-diagram
O diagrama de sequência é adequado para descrever interações que ocorrem em ordem cronológica entre usuário e sistema, sistema e sistema, serviço e serviço, conheça gratuitamente o editor online Mermaid para diagramas de sequência.
Sintaxe básica
Mermaid usa a declaração classDiagram para criar diagramas de classes.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| classDiagram | Diagrama de classes | Cria um diagrama de classes |
| class ClassName | Classe | Define um objeto de classe |
| ClassName : attribute | Atributo | Representa uma variável membro da classe |
| ClassName : method() | Método | Define um método da classe |
| <|-- | Triângulo vazado+ Linha contínua | Representa uma relação de herança |
| <|.. | Triângulo vazado+ Linha tracejada | Representa uma relação de implementação |
| *-- | Losango preenchido+ Linha contínua | Representa uma relação de composição |
| o-- | Losango vazado+ Linha contínua | Representa uma relação de agregação |
| --> | Seta de linha contínua | Representa uma relação de associação |
| ..> | Seta tracejada | Representa uma relação de dependência |
| -- | Linha contínua | Representa uma relação de conexão comum |
| +attribute | Sinal de mais | Representa atributos ou métodos públicos |
| -attribute | Sinal de menos | Representa atributos ou métodos privados |
Os símbolos +, - e # antes dos membros da classe podem representar diferentes níveis de visibilidade.
A sintaxe detalhada de criação de diagramas de classes com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/class-diagram
O diagrama de classes é adequado para design de software, modelagem orientada a objetos e análise da estrutura de programas, conheça gratuitamente o editor online Mermaid para diagramas de classes.
Sintaxe básica
Mermaid usa a declaração stateDiagram-v2 para criar diagramas de estado.
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| stateDiagram-v2 | Diagrama de estado | Cria um diagrama de estado |
| state StateName | Retângulo arredondado | Define um nó de estado básico |
| state StateName : text | Retângulo arredondado com texto | Adiciona um texto descritivo ao estado |
| [*] | Ponto pequeno preenchido ou anel duplo | Representa o início ou o fim de um estado |
| [*] --> StateName | Seta de início | Representa a entrada no primeiro estado |
| StateName --> [*] | Seta de fim | Representa o fim do fluxo de estados |
| A --> B | Seta de linha contínua | Representa uma transição de estado |
| A --> B: event | Seta de linha contínua com rótulo | Transição de estado com evento de disparo |
| state StateName { ... } | Retângulo arredondado aninhado | Define um estado composto |
| state Node <<choice>> | Losango | Nó de seleção de ramificação condicional |
| state Fork <<fork>> | Linha divisória horizontal grossa | Representa o início de um fluxo paralelo |
| state Join <<join>> | Linha divisória horizontal grossa | Representa o fim e a junção de um fluxo paralelo |
A sintaxe detalhada de criação de diagramas de estado com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/state-diagram
O diagrama de estado é adequado para representar status de pedidos, status de fluxos de trabalho, status de usuários, status de sistemas e máquinas de estados, conheça gratuitamente o editor online Mermaid para diagramas de estado.
Sintaxe básica
Mermaid usa a declaração erDiagram para criar diagramas de relacionamento entre entidades, ou seja, diagramas ER.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| erDiagram | Diagrama ER | Cria um diagrama ER |
| ENTITY { } | Retângulo | Define uma entidade |
| type field | Marcador de atributo | Define um atributo de entidade |
| type field PK | Chave primária | Define a chave primária da entidade |
| type field FK | Chave estrangeira | Define a chave estrangeira da entidade |
| type field UK | Chave exclusiva | Define um campo com restrição de exclusividade |
| || | Um | Obrigatório e único |
| o| | Zero ou um | Zero ou um |
| |{ | Um ou mais | No mínimo um |
| o{ | Zero, um ou mais | Zero ou mais |
A sintaxe detalhada de criação de diagramas ER com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/er-diagram
O diagrama ER pode representar entidades, atributos e as relações entre entidades, sendo muito usado no design de banco de dados, conheça gratuitamente o editor online Mermaid para diagramas ER.
Sintaxe básica
Mermaid usa a declaração mindmap para criar mapas mentais.
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| mindmap | Mapa mental | Cria um mapa mental |
| root[text] | Retângulo | Tema raiz retangular |
| root(text) | Retângulo arredondado | Tema raiz de retângulo arredondado |
| root((text)) | Círculo | um tema raiz circular |
| root{{text}} | Hexágono | Tema raiz hexagonal |
| root)text( | Diagrama de bolhas | Tema raiz de bolha |
| [text] | Retângulo | Nó retangular |
| (text) | Retângulo arredondado | Nó de retângulo arredondado |
| ((text)) | Círculo | Nó circular |
| {{text}} | Hexágono | Nó hexagonal |
| )text( | Diagrama de bolhas | Nó de bolha |
A sintaxe detalhada de criação de mapas mentais com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/mindmap
O mapa mental representa principalmente as relações hierárquicas por meio de recuos, por isso é muito adequado para organização do conhecimento, brainstorming, anotações de aula e arquitetura de informação, conheça gratuitamente o editor online Mermaid para mapas mentais.
Sintaxe básica
Mermaid usa a declaração gantt para criar gráficos de Gantt.
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| gantt | Gráfico de Gantt | Cria um gráfico de Gantt |
| title text | Título | Define o título do gráfico de Gantt |
| dateFormat text | Identificador de configuração de data | Define o formato de análise de datas da linha do tempo |
| section text | Barra de título do bloco de agrupamento | Divide os agrupamentos de tarefas |
| TaskName : id, startDate, endDate | Barra horizontal de tarefa | Define as propriedades relacionadas à tarefa |
| startDate | Barra horizontal de tarefa | Define o horário de início |
| endDate | Barra horizontal de tarefa | Define o horário de término |
| duration | Barra horizontal de tarefa | Define a duração da tarefa |
| id | Personalizado | Define o número da tarefa |
| after id | Barra horizontal de tarefa | Define uma tarefa que começa após a tarefa predecessora |
| 16d, 2w | Barra horizontal de tarefa | Representa dias ou semanas |
| milestone, date | Losango preenchido | Define um marco do projeto |
A sintaxe detalhada de criação de gráficos de Gantt com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/gantt
O gráfico de Gantt do Mermaid é adequado para planejamento de projetos, organização de tarefas, progresso de desenvolvimento e gestão de projetos, conheça gratuitamente o editor online Mermaid para gráficos de Gantt.
Sintaxe básica
Mermaid usa a declaração journey para criar diagramas de jornada do usuário.
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| journey | Diagrama de jornada do usuário | Cria um diagrama de jornada do usuário |
| title text | Título | Título do diagrama de jornada do usuário |
| section text | Bloco de seção | Divide o agrupamento das etapas do fluxo |
| TaskName:num:Actor | Nó de fluxo + eixo de escala de satisfação | Define tarefas de interação, pontuação de satisfação e papéis participantes dentro da etapa |
| num (1~5) | Pontuação de satisfação | 1 ponto é o mínimo, 5 pontos é o melhor |
| Me, Cat | Ator | Define vários papéis que participam da tarefa |
A sintaxe detalhada de criação de diagramas de jornada do usuário com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/user-journey-diagram
O diagrama de jornada do usuário é adequado para analisar as diferentes etapas e experiências do cliente, desde o primeiro contato com o produto até a conclusão do objetivo, conheça gratuitamente o editor online Mermaid para diagramas de jornada do usuário.
Sintaxe básica
Mermaid usa a declaração timeline para criar linhas do tempo.
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| timeline | Linha do tempo | Cria uma linha do tempo |
| title text | Título | Define o título da linha do tempo |
| section text | Bloco de seção | Divide os agrupamentos de períodos |
| date : Event1 | Evento | Define os eventos correspondentes a um ponto no tempo |
| : Event2 | Vários eventos | Outros eventos correspondentes ao mesmo momento |
| Espaço | Quebra de linha | Quebra de linha para descrições de eventos muito longas |
A sintaxe detalhada de criação de linhas do tempo com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/timeline
A linha do tempo é adequada para apresentar eventos históricos, evolução de projetos, iterações de produtos e informações em ordem cronológica, conheça gratuitamente o editor online Mermaid para linhas do tempo.
Sintaxe básica
Mermaid usa a declaração quadrantChart para criar gráficos de quadrantes.
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
Resultado da renderização
Onde:
A sintaxe detalhada de criação de gráficos de quadrantes com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/quadrant-chart
O gráfico de quadrantes é adequado para posicionamento de produto, análise de prioridades, análise competitiva e classificação bidimensional, conheça gratuitamente o editor online Mermaid para gráficos de quadrantes.
Sintaxe básica
O diagrama kanban do Mermaid é usado para organizar itens de trabalho de acordo com o status das tarefas, como a fazer, em andamento e concluído. Uma estrutura típica pode ser representada assim:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
Resultado da renderização
Onde：
A sintaxe detalhada de criação de diagramas kanban com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/kanban
O diagrama kanban é adequado para gestão de projetos, acompanhamento de tarefas, processos de desenvolvimento e gestão de fluxos de trabalho, conheça gratuitamente o editor online Mermaid para diagramas kanban.
Sintaxe básica
O diagrama de requisitos pode ser usado para representar as relações entre requisitos, funções e elementos do sistema, Mermaid usa a declaração requirementDiagram para criar diagramas de requisitos.
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| requirementDiagram | Diagrama de requisitos | Cria um diagrama de requisitos |
| Requirement name { } | Requisito | Define um requisito básico |
| functionalRequirement name { } | Funcional | Define um requisito funcional |
| interfaceRequirement name { } | Interface | Define um requisito de interface |
| performanceRequirement name { } | Desempenho | Define um requisito de desempenho |
| physicalRequirement name { } | Físico | Define um requisito físico |
| element name {type: name docRef: name} | Elemento | Define entidades como sistemas, componentes e testes |
| X - satisfies -> Y | Seta tracejada | Uma entidade atende ao requisito correspondente |
| X - contains -> Y | Linha contínua, com um ponto circular em cruz na extremidade inicial | Um requisito contém outro requisito |
| X - derives -> Y | Seta tracejada | Um requisito deriva de outro requisito |
| X - copies -> Y | Seta tracejada | Um requisito copia outro requisito |
| X - traces -> Y | Seta tracejada | Rastreabilidade bidirecional entre requisitos |
A sintaxe detalhada de criação de um diagrama de requisitos do Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/requirement-diagram
O diagrama de requisitos é adequado para análise de requisitos de produto, engenharia de sistemas e rastreamento de requisitos, conheça gratuitamente o editor online Mermaid para diagramas de requisitos.
Sintaxe básica
Mermaid usa a declaração pie para criar gráficos de pizza.
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
Resultado da renderização
Onde:
A sintaxe detalhada de criação de gráficos de pizza com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/pie-chart
O gráfico de pizza é adequado para representar proporções e relações de composição, conheça gratuitamente o editor online Mermaid para gráficos de pizza.
Sintaxe básica
O diagrama de Sankey é usado principalmente para representar o fluxo de tráfego, recursos, capital ou dados entre diferentes nós, Mermaid usa a declaração sankey-beta para criar diagramas de Sankey.
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
Resultado da renderização
Onde:
A sintaxe detalhada de criação de diagramas de Sankey com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/sankey-diagram
O diagrama de Sankey é um tipo de gráfico de visualização usado para mostrar o fluxo de um conjunto de valores para outro, conheça gratuitamente o editor online Mermaid para diagramas de Sankey.
Sintaxe básica
Mermaid usa a declaração xychart-beta para criar gráficos XY.
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| xychart-beta | Gráfico de coordenadas XY | Cria um gráfico de coordenadas XY |
| xychart-beta horizontal | Gráfico de coordenadas XY horizontal | Cria um gráfico de coordenadas XY horizontal |
| title "name" | Título | Define o título do gráfico XY |
| x-axis "axisTitle" [a,b,c] | Eixo X | Define as categorias e o título do eixo horizontal |
| y-axis "axisTitle" min --> max | Eixo Y | Define o intervalo e o título do eixo vertical |
| y-axis "axisTitle" | Eixo Y apenas com título | Define apenas o nome do eixo vertical; o intervalo de valores é ajustado automaticamente |
| bar [num1, num2, num3] | Gráfico de colunas | Define a série de dados do gráfico de barras |
| line [num1, num2, num3] | Gráfico de linhas | Define a série de dados do gráfico de linhas |
A sintaxe detalhada de criação de gráficos xy com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/xy-chart
O gráfico XY é adequado para mostrar variações de dados, comparações de valores e visualizações de dados simples, conheça gratuitamente o editor online Mermaid para gráficos XY.
Sintaxe básica
O gráfico de radar é adequado para comparar o desempenho de vários objetos em múltiplas dimensões, como avaliação de competências, indicadores de produto e comparação de soluções. Mermaid usa o radar-beta para criar gráficos de radar.
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| radar-beta | Gráfico de radar | Cria um gráfico de radar |
| title "name" | Título | Define o título do gráfico de radar, logo após radar-beta |
| title "name" | Título | Define o título do gráfico de radar antes de radar-beta, com 3 traços no início e no fim |
| axis id ["axisTitle"] | Eixo de dimensão | Define as dimensões e os nomes do gráfico de radar |
| curve id ["name"]{[values]} | Curva de dados | Define o nome da série de dados e os valores de cada dimensão |
| max value | Valor máximo | Define o valor máximo do intervalo do gráfico de radar |
| min value | Valor mínimo | Define o valor mínimo do intervalo do gráfico de radar |
A sintaxe detalhada de criação de gráficos de radar com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/radar-chart
O gráfico de radar é especialmente útil para desenvolvedores, cientistas de dados e engenheiros que precisam representar dados de forma circular, clara e concisa, conheça gratuitamente o editor online Mermaid para gráficos de radar.
Sintaxe básica
Mermaid usa a declaração gitGraph para criar diagramas Git.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
Resultado da renderização
Onde:
A sintaxe detalhada de criação de diagramas Git com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/git-graph
O diagrama Git é adequado para representar processos de controle de versão, como commits, criação, troca e mesclagem de ramificações, conheça gratuitamente o editor online Mermaid para diagramas Git.
Sintaxe básica
O diagrama C4 do Mermaid é usado para modelagem de arquitetura de software e pode descrever sistemas de software, contêineres, componentes e suas relações em diferentes níveis.
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
Resultado da renderização
Onde:
Sintaxe comum
| Sintaxe | Diagrama | Significado |
| C4Context | Diagrama de contexto do sistema | Cria um diagrama de contexto de sistema C4 |
| C4Container | Diagrama de contêineres | Cria um diagrama de contêineres C4 |
| C4Component | Diagrama de componentes | Cria um diagrama de componentes C4 |
| C4Dynamic | Diagrama de interação dinâmica | Cria um diagrama de interação dinâmica C4 |
| C4Deployment | Diagrama de implantação | Cria um diagrama de implantação C4 |
| title | Título | Define o título do diagrama C4 |
| Person(alias, "label", "description") | Pessoa | Representa o usuário ou papel que usa o sistema |
| Person_Ext(alias, "label", "description") | Pessoa externa | Representa pessoas ou papéis organizacionais externos ao sistema que participam da interação |
| System(alias, "label", "description") | Nó de sistema | Representa o sistema de software a ser analisado |
| System_Ext(alias, "label", "description") | Nó de sistema externo | Representa serviços de terceiros ou sistemas de software externos dos quais o sistema depende |
| System_Boundary(alias, "label") | Limite do sistema | Representa o limite do escopo do sistema |
| Container(alias, "label", "technology") | Contêiner | Representa uma unidade de software que pode ser executada de forma independente dentro do sistema |
| Container_Boundary(alias, "label") | Limite do contêiner | Representa o escopo de um contêiner ou serviço |
A sintaxe detalhada de criação de diagramas C4 com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/c4-diagram
O diagrama C4 é adequado para design de arquitetura de software, análise de sistemas e documentação técnica, conheça gratuitamente o editor online Mermaid para diagramas C4.
Sintaxe básica
Mermaid usa a declaração architecture-beta para criar diagramas de arquitetura.
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
Resultado da renderização
Onde:
A sintaxe detalhada de criação de diagramas de arquitetura com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/architecture-diagram
O diagrama de arquitetura é adequado para representar as relações entre servidores, bancos de dados, serviços em nuvem, serviços de aplicação e diferentes componentes do sistema, conheça gratuitamente o editor online Mermaid para diagramas de arquitetura.
Sintaxe básica
O diagrama de blocos descreve a estrutura do sistema principalmente por meio de módulos e relações de conexão, Mermaid usa a declaração block-beta para criar diagramas de blocos.
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
Resultado da renderização
Onde:
A sintaxe detalhada de criação de diagramas de blocos com Mermaid está disponível na seguinte página: https://www.processon.io/pt/mermaid/block-diagram
O diagrama de blocos é adequado para módulos de sistema, estrutura funcional, arquitetura técnica e relações entre componentes, conheça gratuitamente o editor online Mermaid para diagramas de blocos.
Sintaxe básica
O diagrama de pacotes é usado principalmente para representar os campos e comprimentos na estrutura de dados de pacotes de rede ou protocolos, Mermaid usa a declaração packet-beta para criar diagramas de pacotes.
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
Resultado da renderização
Onde:
O diagrama de pacotes é adequado para protocolos de rede, estruturas de pacotes e documentos de especificação técnica, conheça gratuitamente o editor online Mermaid para diagramas de pacotes.
Não conhecer a sintaxe do Mermaid não significa que você não possa usar o Mermaid para gerar gráficos, Você pode adotar as seguintes abordagens:
Usar modelos Mermaid gratuitamente
Primeiro escolha um modelo próximo da sua necessidade e depois modifique os nós, os textos e as relações. Essa abordagem é ideal para quem usa o Mermaid pela primeira vez.
Gerar código Mermaid com IA
Você pode descrever diretamente em linguagem natural o diagrama desejado, por exemplo:
Crie um fluxo de processamento de pedidos de comércio eletrônico, incluindo o pedido do usuário, o pagamento, a verificação de estoque, o envio e a conclusão do pedido.
A IA pode gerar o código Mermaid a partir da descrição e você pode ajustá-lo conforme a necessidade real.
Usar IA para verificar e corrigir o código
Se houver um erro de sintaxe no código Mermaid, você pode pedir à IA que ajude a localizar o problema e a corrigir o código.
Gerar código por reconhecimento de imagem
Para fluxogramas, diagramas de arquitetura ou outros diagramas estruturados já existentes, você pode tentar gerar o código Mermaid por reconhecimento de imagem e continuar a edição.
O editor online Mermaid geralmente precisa resolver três questões centrais: escrever código, visualizar o diagrama e exportar o resultado. Além disso, os modelos e a IA também podem reduzir a barreira de uso do Mermaid.
Tomando como exemplo o ProcessOn Mermaid online, você pode diretamente no navegador:
Portanto, para os usuários que criam diagramas Mermaid com frequência, o editor online Mermaid da ProcessOn permite reunir a escrita do código Mermaid, a geração de gráficos, a edição e a modificação posteriores, a exportação e o compartilhamento em um único ambiente de trabalho.
Do fluxograma, diagrama de sequência e diagrama de classes do Mermaid até o gráfico de Gantt, o mapa mental, o gráfico de quadrantes, o diagrama de Sankey, o diagrama Git, o diagrama C4 e o diagrama de arquitetura, tudo pode ser criado com a sintaxe Mermaid e editado.
Venha usar o editor online Mermaid para escrever código Mermaid online e gerar diagramas agora mesmo.
A sintaxe do Mermaid é difícil de aprender?
A sintaxe básica do Mermaid é relativamente simples; para a maioria dos diagramas, basta dominar as formas básicas de escrita, como a declaração do diagrama, os nós, as linhas de conexão e os textos. Por exemplo, sequenceDiagram é usado para declarar um diagrama de sequência e flowchart para declarar um fluxograma. As regras de sintaxe variam conforme o tipo de diagrama, e diagramas complexos exigem ainda o aprendizado dos parâmetros e das configurações correspondentes.
Por que o diagrama não é gerado quando escrevo o código Mermaid errado?
O Mermaid é bastante sensível à estrutura sintática. As causas mais comuns incluem erro na declaração do diagrama, sintaxe incompleta de nós ou linhas de conexão, tratamento incorreto de recuos ou caracteres especiais e uso de sintaxe não suportada pela versão atual do Mermaid.
Qual é a diferença entre o Mermaid e os softwares tradicionais de desenho?
O Mermaid descreve diagramas principalmente por meio de código em texto, enquanto os softwares tradicionais de desenho costumam produzir diagramas arrastando formas e linhas de conexão e ajustando estilos.
Os diagramas do Mermaid podem ser salvos e reutilizados?
Sim. O conteúdo principal de um diagrama Mermaid é o código em texto, portanto você pode salvar o código em Markdown, em arquivos de código ou em outros documentos que suportem Mermaid e renderizá-lo novamente quando precisar.
Essa também é uma diferença importante entre o Mermaid e os diagramas em formato de imagem pura: a imagem salva o resultado final, enquanto o código Mermaid salva também as informações estruturais do diagrama.
Qual é a relação entre o Mermaid e o Markdown?
O Mermaid é frequentemente usado junto com o Markdown, mas os dois não são a mesma sintaxe.
O Markdown é usado principalmente para escrever textos estruturados, enquanto o Mermaid gera diagramas por meio de código. Em editores Markdown que suportam Mermaid, é possível incorporar o código Mermaid ao documento Markdown, reunindo assim o diagrama e as explicações textuais em um mesmo documento.
Seguindo o tutorial para tentar
Livre para usar ProcessOn
