📊 Cap 05: Diagramas como Código com Mermaid.js: Fluxos, Sequência, Classes e Gantt

Guia Avançado de Markdown & Documentação Viva

🗺️ Mapa Conceitual

flowchart TD
    CODE["Texto Mermaid puro no Markdown"] --> ENGINE["Mermaid.js Library"]
    ENGINE --> SVG["Renderiza vetor SVG interativo e nítido em qualquer resolução"]
    
    style CODE fill:#e1f5fe,stroke:#03a9f4,stroke-width:1px
    style SVG fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: Visão Geral e Notação

• Objetivo Central: Dominar os recursos de diagramas como código com mermaid.js: fluxos, sequência, classes e gantt.
• Documentação Eficaz: Riqueza semântica e facilidade de leitura.
• Padrão de Engenharia: Docs-as-Code versionados no mesmo repositório do software.

💡 Slide 2: Práticas e Extensões

• Formatações avançadas com GitHub Flavored Markdown (GFM).
• Diagramação dinâmica sem necessidade de softwares pesados de imagem.
• Integração com Obsidian, Canvas e plugins de produtividade.

🚀 Slide 3: Prática e Publicação

• Compilação estática com Jekyll, Docusaurus ou VitePress.
• Automação de testes de integridade de links no CI/CD.
• Publicação de portais ricos e acessíveis na web.

📋 Resumo da Aula & Próximos Passos

• Revise o código de exemplo deste capítulo.
• Complete os exercícios práticos nos 4 níveis de complexidade.
• Realize o quiz formativo interativo para validar sua compreensão.