Visualizador e editor de Markdown com Mermaid

Documento Markdown

Escreva, cole ou abra um arquivo Markdown e veja a pré-visualização na hora, como no GitHub: tabelas, listas de tarefas, notas de rodapé, alertas, diagramas Mermaid, fórmulas LaTeX e código destacado. Depois você pode baixá-lo como HTML ou salvá-lo em PDF. Tudo é processado no seu navegador.

Sumário

Rolagem sincronizada

Respeitar quebras de linha

---
title: "Documento de exemplo"
tags: [markdown, mermaid, katex]
---

# Documento de exemplo

Edite este texto e veja o resultado na hora. Suporta **negrito**, *itálico*, ~~tachado~~, `código`, links como https://ittools.tech e notas de rodapé[^1].

> [!NOTE]
> Os alertas do GitHub também funcionam: experimente TIP, IMPORTANT, WARNING ou CAUTION.

## Tarefas e tabelas

- [x] Escrever o README
- [ ] Adicionar um diagrama

| HTTP | Endpoint | Status |
|:-------|:-----|-------:|
| `GET` | `/api/users` | 200 |
| `POST` | `/api/users` | 201 |
| `DELETE` | `/api/users/42` | 204 |

```typescript
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
}
```

## Diagramas e fórmulas

```mermaid
sequenceDiagram
    participant C as App
    participant A as API
    participant D as DB
    C->>A: GET /api/users/42
    A->>D: SELECT * FROM users WHERE id = 42
    D-->>A: row
    A-->>C: 200 OK (JSON)
```

```mermaid
flowchart LR
    A[Commit] --> B{Tests OK?}
    B -- ✓ --> C[Build]
    B -- ✗ --> D[Fix]
    D --> A
    C --> E[Deploy]
```

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Euler: $e^{i\pi} + 1 = 0$

</details>

[^1]: Tudo é processado no seu navegador; o documento não é enviado a nenhum servidor.

0 palavras · 0 linhas · 0 min de leitura

Como funciona

Markdown é o formato dos README, da documentação técnica, das wikis e das notas de quase qualquer ferramenta de desenvolvimento, mas cada plataforma acrescenta suas próprias extensões. Este visualizador segue o GitHub Flavored Markdown (GFM), a variante mais usada: além do básico, desenha tabelas, listas de tarefas, tachado, links automáticos, notas de rodapé e os alertas NOTE, TIP, IMPORTANT, WARNING e CAUTION.

Os blocos de código marcados como mermaid viram diagramas (fluxo, sequência, classes, estados, entidade-relacionamento, Gantt, Git e mais), as fórmulas entre sinais $ são desenhadas com KaTeX e o restante do código é destacado conforme a linguagem indicada. Se o documento começar com um bloco YAML entre linhas ---, como os do Jekyll, Hugo ou Docusaurus, ele é exibido como uma tabela à parte.

O documento não sai do seu navegador. O HTML que ele contiver é limpo antes de ser exibido, então abrir um README de terceiros não executa scripts, e as bibliotecas de diagramas e fórmulas só são baixadas se o documento as usar.

Exemplos

```mermaid
flowchart LR
  A[Commit] --> B[Build] --> C[Deploy]
```

Commit → Build → DeployUm bloco de código com a linguagem mermaid é desenhado como diagrama. Se tiver um erro de sintaxe, o código continua visível com a mensagem do Mermaid embaixo.

## Getting Started
## API v2.0 (beta)
## Getting Started

#getting-started · #api-v20-beta · #getting-started-1Os títulos recebem o mesmo id que o GitHub dá a eles: minúsculas, espaços trocados por hifens, sem sinais de pontuação e com um número no final se repetirem. Assim, um link [texto](#getting-started) funciona igual aqui e no repositório.

Line one
Line two

<p>Line one
Line two</p>  →  <p>Line one<br>Line two</p>

No Markdown padrão, uma quebra de linha simples não encerra o parágrafo; é preciso deixar uma linha em branco ou terminar a linha com dois espaços. Os comentários e issues do GitHub respeitam essas quebras: para ver assim, ative Respeitar quebras de linha.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.Uma citação que começa com [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] ou [!CAUTION] é exibida como um alerta colorido, igual ao GitHub. Em plataformas que não os suportam, aparece como uma citação comum.

Casos de uso

Conferir como vai ficar um README ou um CHANGELOG antes de enviá-lo ao repositório.
Ler um arquivo .md baixado sem instalar um editor: abra-o com o botão ou arrastando-o.
Testar diagramas Mermaid de arquitetura, fluxos ou sequências e corrigir a sintaxe com a pré-visualização ao vivo.
Converter documentação em uma página HTML autônoma ou em um PDF para compartilhar com quem não usa Git.
Escrever anotações ou documentação técnica com fórmulas matemáticas em notação LaTeX.
Ver o texto em Markdown retornado por um assistente de IA com a formatação, as tabelas e os blocos de código.

Perguntas frequentes

Quais tipos de diagramas Mermaid podem ser desenhados?

Todos os que o Mermaid oferece: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture e kanban, entre outros. Os diagramas usam cores claras ou escuras conforme o tema do site e são desenhados em modo estrito: o texto dos rótulos não pode injetar HTML nem executar código ao clicar.

Como escrevo uma fórmula matemática?

Entre sinais $ para uma fórmula em linha, como $a^2 + b^2 = c^2$, e entre $$ ou em um bloco de código com a linguagem math para uma fórmula centralizada em sua própria linha. A sintaxe é a do LaTeX suportada pelo KaTeX. Para escrever um sinal $ literal, como em um preço, coloque uma barra invertida antes dele; mesmo assim, "$5 e $10" não é interpretado como fórmula porque o segundo $ tem um espaço antes e um número depois.

Posso usar HTML dentro do Markdown?

Sim, como no GitHub: tags como details e summary para seções recolhíveis, kbd para teclas, sub e sup, img com tamanho ou p com align. Antes de exibir, são removidos os scripts, os atributos de eventos como onclick, os links javascript: e as tags style e form, então um documento de terceiros não pode executar código nem alterar o resto da página.

Como converto para PDF?

Em Exportar e Imprimir ou salvar em PDF, abre-se a caixa de diálogo de impressão só com o documento, sem a interface do site, e ali você escolhe Salvar como PDF. Tabelas, blocos de código e diagramas evitam ser cortados entre páginas. Se preferir um arquivo para publicar, Baixar .html gera uma página autônoma com os estilos incluídos.

Por que uma imagem com caminho relativo não aparece?

Porque o visualizador não tem acesso às outras pastas do repositório: um caminho como ./docs/logo.png só existe no seu disco ou no GitHub. As imagens com endereço completo, que começam com https://, são exibidas sem problema.