📝

Editor de Markdown

Editor de Markdown profissional com visualização em tempo real e suporte para diagramas Mermaid.

O que é o Editor de Markdown?

O editor de Markdown é uma ferramenta para redigir e visualizar documentos no formato Markdown. Ele suporta o GitHub Flavored Markdown e diagramas Mermaid, oferecendo uma visualização em tempo real para uma documentação eficiente.

Benefits

Visualização em tempo real para feedback imediato ao escrever
Suporta GFM (GitHub Flavored Markdown) e diagramas Mermaid
Importação e exportação simples de arquivos Markdown locais
O processamento local de dados garante total privacidade

Como usar?

1. Digite o seu texto na janela de edição à esquerda.
2. A visualização formatada aparecerá instantaneamente no lado direito.
3. Use a barra de ferramentas para formatação ou diagramas.
4. Exporte o seu documento final como arquivo ou copie o texto.

Importar arquivo

# Welcome to Markdown Editor

This is a professional-grade Markdown editor with **real-time preview**, **GitHub-style rendering**, and **Mermaid support**.

## 🚀 Getting Started

- **Real-time Preview**: Edit on the left, see results on the right.
- **Emoji Search**: Type `@` followed by a name (e.g., `@happy`) to quickly insert emojis.
- **Syntax Highlighting**: Beautiful highlighting for various programming languages.

---

## 📝 Markdown Syntax Examples

### 1. Typography
You can use **bold**, *italic*, or ~~strikethrough~~.
Even support custom tags: [+This is an insertion+], [-This is a deletion-], and [color:orange]{Important Text}.

### 2. Lists
#### Unordered List
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
  - [color:orange]{Important Text}

#### Ordered List
1. First item
2. Second item
3. Third item

#### Task List
- [x] Finished task
- [ ] Unfinished task

### 3. Blockquotes & Tables

> Professional-grade writing requires professional-grade tools. This editor is designed for speed and clarity.

| Feature | Support | Performance |
| :--- | :---: | ---: |
| GFM | ✅ Yes | 🚀 High |
| Mermaid | ✅ Yes | ⚡ Fast |
| Tables | ✅ Yes | 📈 Stable |

---

## 🎨 Advanced Features

### 4. Code Blocks
```typescript
function HelloWorld() {
  console.log("Hello, AttendionFlow!");
}
```

### 5. Mermaid Flowcharts
```mermaid
graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Keep trying!];
    C --> E[Celebrate! 🎉];
    D --> B;
```

### 6. Links & Images
[Learn more about AttendionFlow](https://github.com/yaohsienhuang/attentionflow)

---
*Happy writing!* ✍️

Welcome to Markdown Editor

This is a professional-grade Markdown editor with real-time preview, GitHub-style rendering, and Mermaid support.

🚀 Getting Started

Real-time Preview: Edit on the left, see results on the right.
Emoji Search: Type @ followed by a name (e.g., @happy) to quickly insert emojis.
Syntax Highlighting: Beautiful highlighting for various programming languages.

📝 Markdown Syntax Examples

1. Typography

You can use bold, italic, or ~~strikethrough~~. Even support custom tags: This is an insertion, ~~This is a deletion~~, and Important Text.

2. Lists

Unordered List

Item 1
Item 2
- Sub-item 2.1
- Sub-item 2.2
- Important Text

Ordered List

First item
Second item
Third item

Task List

Finished task
Unfinished task

3. Blockquotes & Tables

Professional-grade writing requires professional-grade tools. This editor is designed for speed and clarity.

Feature	Support	Performance
GFM	✅ Yes	🚀 High
Mermaid	✅ Yes	⚡ Fast
Tables	✅ Yes	📈 Stable

🎨 Advanced Features

4. Code Blocks

function HelloWorld() {
  console.log("Hello, AttendionFlow!");
}

5. Mermaid Flowcharts

graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Keep trying!];
    C --> E[Celebrate! 🎉];
    D --> B;

6. Links & Images

Learn more about AttendionFlow

Happy writing! ✍️

#Basic Syntax

# Heading 1H1
**Bold**Bold
*Italic*Italic
~~Strike~~Strike

listLists & Tasks

- List ItemBullet
1. ItemNumber
- [x] TaskDone
- [ ] TaskTodo

&Advanced Syntax

[Text](URL)Link
> QuoteQuote
| Table |Table
`Code`Inline

!Custom Tags

[+Add+]Ins
[-Del-]Del
[color:orange]{Important Text}Color
```mermaidGraph

Explorar mais ferramentas

🗄️

Formatador JSON

Ferramenta profissional para programadores para formatar, validar e minificar dados JSON.

🎨

Seletor de Cores HTML

Seletor de cores HTML avançado com suporte para HSL, RGB e HEX.

🧪

Extrator de Cor

Gerador inteligente de paletas de cores a partir de imagens e URLs.

🎡

Roda da Loteria

Roda da loteria profissional e seletor aleatório. Ideal para sorteios.

Todo o processamento de dados é feito localmente no seu navegador. Nenhum conteúdo é enviado para qualquer servidor.