# Arquiteto Sereia: Habilidade de Diagrama e Documentação > Gere diagramas Sereia abrangentes e documentos de design com orquestração inteligente, conversão de código para diagrama e utilitários Python. Comece a criar documentação técnica detalhada em segundos. - Canonical: https://nanoskill.ai/pt/skills/mermaid-agent-skill - Markdown: https://nanoskill.ai/pt/skills/mermaid-agent-skill.md - Author: SpillwaveSolutions - Published: 2026-05-26T01:25:42.765Z - Updated: 2026-07-19T03:48:37.206Z - Language: pt - Source type: github - Popularity signal: 66 ## Sources - https://github.com/spillwavesolutions/design-doc-mermaid ## Install ```shell npx skills add https://github.com/spillwavesolutions/design-doc-mermaid ``` ## About A habilidade Arquiteto Sereia capacita desenvolvedores, arquitetos e redatores técnicos a criar e gerenciar com eficiência diagramas Sereia abrangentes e documentos de design. Ao aproveitar orquestração inteligente e carregamento de guias sob demanda, essa habilidade simplifica a visualização de sistemas complexos, fluxos de trabalho e estruturas de código. Ela ajuda os usuários a gerar diagramas precisos e visualmente atraentes, garantindo comunicação clara e documentação atualizada. Esta poderosa habilidade Código Cláudio oferece recursos avançados como geração de diagramas a partir de código, permitindo extrair insights arquitetônicos diretamente de suas aplicações Bota de Primavera ou API Rápida. Ela também inclui um rico conjunto de utilitários Python para extrair, validar e converter diagramas Sereia para formatos de imagem, facilitando a integração com fluxos de trabalho de documentação existentes e ferramentas como Confluência. O sistema hierárquico garante uso eficiente de tokens e tempos de resposta rápidos, proporcionando uma experiência perfeita. Se você precisa documentar uma API, visualizar uma arquitetura de sistema ou ilustrar um processo de negócio, o Arquiteto Sereia fornece as ferramentas e modelos para realizar o trabalho. Com suporte para vários tipos de diagrama, símbolos semânticos Unicode e estilo de alto contraste, seus diagramas serão informativos e acessíveis. A habilidade também oferece um caminho de aprendizado estruturado e exemplos para ajudar os usuários a se tornarem proficientes rapidamente na criação de documentação técnica detalhada. ## Key features - **Geração Inteligente de Diagramas**: Crie vários diagramas Mermaid, incluindo diagramas de atividade, implantação, arquitetura e sequência, para fluxos de trabalho, infraestrutura, componentes de sistema e fluxos de API. - **Conversão de Código para Diagrama**: Gere automaticamente diagramas a partir de bases de código existentes (ex: Spring Boot, FastAPI) ou arquivos de configuração para visualizar arquitetura, implantações e fluxos de sequência. - **Criação Abrangente de Documentos de Design**: Produza documentos de design completos com diagramas Mermaid incorporados usando modelos predefinidos para designs de arquitetura, API, recurso, banco de dados e sistema. - **Símbolos Semânticos Unicode e Estilização de Alto Contraste**: Aumente a clareza e acessibilidade dos diagramas com mais de 100 símbolos Unicode significativos e esquemas de cores de alto contraste para melhor legibilidade. - **Utilitários Python para Gerenciamento de Diagramas**: Utilize scripts Python para extrair, validar e converter diagramas Mermaid para imagens PNG/SVG, suportando processamento em lote e integração com ferramentas como Confluence. ## Use cases - **Visualizar Arquitetura de Software**: Desenvolvedores e arquitetos podem gerar diagramas de arquitetura e implantação a partir de código ou arquivos de configuração para entender componentes de sistema e infraestrutura. - **Documentar Fluxos de API e Fluxos de Trabalho**: Redatores técnicos e engenheiros podem criar diagramas de sequência e atividade detalhados para ilustrar interações de API, processos de negócios e jornadas do usuário. - **Automatizar a Criação de Documentos de Design**: Equipes podem gerar rapidamente documentos de design estruturados para vários propósitos (API, sistema, recurso) com diagramas Mermaid incorporados automaticamente, economizando tempo e garantindo consistência. - **Manter Documentação Técnica Atualizada**: Garanta que a documentação permaneça atualizada gerando diagramas diretamente do código ou configuração, e converta-os facilmente para formatos de imagem para compartilhamento e colaboração. ## Result preview Veja diagramas Sereia sobre o sistema para uma plataforma de entrega de comida gerados por esta Habilidade de Agente. ![mermaid-architect-demo1](https://file.nanoskill.ai/mermaid-architect-demo1.jpg) ![mermaid-architect-demo-2](https://file.nanoskill.ai/mermaid-architect-demo-2.jpg) ![mermaid-architect-demo-3](https://file.nanoskill.ai/mermaid-architect-demo-3.jpg) ## Result walkthrough ### Passo 1：Instalar Adicione a habilidade ao seu agente. ![mermaid-architect-step-1](https://file.nanoskill.ai/mermaid-architect-step-1.jpg) ### Passo 2：Descreva um processo Insira um fluxo de trabalho, sistema ou sequência que você deseja visualizar. ![mermaid-architect-step-2](https://file.nanoskill.ai/mermaid-architect-step-2.jpg) ### Passo 3：Analisar Resultado Obtenha diagramas Sereia gerados com base na descrição do seu processo. ![mermaid-architect-step-3](https://file.nanoskill.ai/mermaid-architect-step-3.jpg) ## Skill definition # Arquiteto Mermaid - Habilidade Abrangente de Diagramas e Documentação **Versão 2.0** - Arquitetura hierárquica com orquestração inteligente Uma poderosa habilidade do Claude Code para criar diagramas Mermaid e documentos de design usando carregamento de guias sob demanda, geração de código para diagramas e utilitários Python. ## Instalação ### Instalação com um clique via Skilz Marketplace Instale esta habilidade instantaneamente do [Skilz Marketplace](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/): ```bash skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid ``` ### Instalação Manual Clone diretamente no diretório de habilidades do Claude Code: ```bash # Navegue até o diretório de habilidades cd ~/.claude/skills # Clone o repositório git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git ``` ### Verificar Instalação Após a instalação, verifique se a habilidade está disponível: ```bash # Listar habilidades instaladas ls ~/.claude/skills/design-doc-mermaid # Ou pergunte ao Claude Code # "Listar minhas habilidades instaladas" ``` ## O que esta habilidade faz **Geração Inteligente de Diagramas:** - Diagramas de atividades (fluxos de trabalho, processos, lógica de negócios) - Diagramas de implantação (infraestrutura em nuvem, K8s, serverless) - Diagramas de arquitetura (componentes de sistema, microsserviços) - Diagramas de sequência (fluxos de API, interações de serviço) - Documentos de design completos com diagramas incorporados **Conversão de Código para Diagrama:** - Extrair arquitetura de aplicações Spring Boot - Gerar diagramas de implantação a partir de arquivos de configuração - Criar diagramas de sequência a partir de chamadas de método - Documentar pipelines ETL e fluxos de dados **Gerenciamento de Diagramas:** - Extrair diagramas Mermaid de arquivos Markdown - Validar sintaxe do diagrama com mermaid-cli - Converter diagramas para imagens PNG/SVG - Processar diretórios inteiros em lote ## Início Rápido ### Criar um Diagrama de Atividades ``` Usuário: "Criar um diagrama de atividades para registro de usuário com verificação de e-mail" ``` A habilidade irá: 1. Carregar `references/guides/diagrams/activity-diagrams.md` 2. Usar o modelo de padrão de registro 3. Adicionar símbolos Unicode (🔐 para segurança, 📧 para e-mail, ✅ para sucesso) 4. Aplicar estilo de alto contraste 5. Gerar diagrama Mermaid completo ### Gerar a partir de Código ``` Usuário: "Aqui está meu application.yml do Spring Boot - gere um diagrama de implantação" ``` A habilidade irá: 1. Analisar configuração (fonte de dados, cache, segurança) 2. Carregar `references/guides/diagrams/deployment-diagrams.md` 3. Carregar `examples/spring-boot/README.md` 4. Mapear configuração para recursos em nuvem 5. Gerar diagrama de implantação com especificações de recursos ### Criar Documento de Design ``` Usuário: "Criar um documento de design de API para a API de contatos" ``` A habilidade irá: 1. Carregar `assets/api-design-template.md` 2. Carregar guias de diagrama relevantes (sequência, ER, arquitetura) 3. Gerar documento completo com diagramas incorporados 4. Salvar em `docs/design/api-contacts-v1-2025-01-13.md` ## Estrutura ### Organização Hierárquica ``` mermaid-architect/ ├── SKILL.md # Orquestrador principal com árvore de decisão ├── README.md # Este arquivo ├── CLAUDE.md # Instruções do Claude Code │ ├── references/ # Materiais de referência │ ├── mermaid-diagram-guide.md # Guia geral legado │ └── guides/ # Guias especializados (carregados sob demanda) │ ├── diagrams/ │ │ ├── activity-diagrams.md # ✅ Completo │ │ ├── deployment-diagrams.md # ✅ Completo │ │ ├── architecture-diagrams.md # ✅ Completo │ │ └── sequence-diagrams.md # ✅ Completo │ ├── code-to-diagram/ │ │ └── README.md # ✅ Completo (guia mestre) │ ├── unicode-symbols/ │ │ └── guide.md # ✅ Completo (mais de 100 símbolos) │ └── troubleshooting.md # ✅ Completo (28 erros comuns) │ ├── scripts/ # Utilitários Python │ ├── extract_mermaid.py # ✅ Extrair e validar diagramas │ └── mermaid_to_image.py # ✅ Converter para PNG/SVG │ ├── examples/ # Padrões específicos de linguagem │ ├── spring-boot/ # ✅ Completo │ ├── fastapi/ # ✅ Completo │ ├── react/ # ✅ Completo │ ├── python-etl/ # ✅ Completo │ ├── node-webapp/ # ✅ Completo │ └── java-webapp/ # ✅ Completo │ └── assets/ # Modelos de documento de design ├── architecture-design-template.md ├── api-design-template.md ├── feature-design-template.md ├── database-design-template.md └── system-design-template.md ``` ## Principais Funcionalidades ### 1. Símbolos Semânticos Unicode Cada diagrama usa símbolos Unicode significativos: ```mermaid graph TB User[👤 Cliente] --> Gateway[🌐 Gateway de API] Gateway --> Auth[🔐 Serviço de Autenticação] Gateway --> API[⚙️ Serviço de API] API --> DB[(💾 Banco de Dados)] API --> Cache[(⚡ Redis)] API --> Queue[📬 Fila de Mensagens] Queue --> Worker[⚙️ Trabalhador em Segundo Plano] ``` **Categorias de Símbolos:** - Infraestrutura: ☁️ 🌐 🔌 📡 🗄️ - Computação: ⚙️ ⚡ 🔄 🚀 💨 - Dados: 💾 📦 📊 📈 🗃️ - Mensageria: 📨 📬 📤 📥 🐰 - Segurança: 🔐 🔑 🛡️ 🚪 👤 - Monitoramento: 📝 📊 🚨 ⚠️ ✅ ❌ ### 2. Estilo de Alto Contraste Todos os diagramas usam cores acessíveis e de alto contraste - veja SKILL.md para detalhes completos. ### 3. Utilitários Python #### Extrair Diagramas ```bash # Listar todos os diagramas em um arquivo python scripts/extract_mermaid.py document.md --list-only # Extrair para arquivos .mmd separados python scripts/extract_mermaid.py document.md --output-dir diagrams/ # Validar todos os diagramas python scripts/extract_mermaid.py document.md --validate # Substituir diagramas por referências de imagem (para o Confluence) python scripts/extract_mermaid.py document.md --replace-with-images \ --image-format png --output-markdown output.md ``` #### Converter para Imagens ```bash # Arquivo único python scripts/mermaid_to_image.py diagram.mmd output.png # Tema e tamanho personalizados python scripts/mermaid_to_image.py diagram.mmd output.svg \ --theme dark --background white --width 1200 # Converter diretório em lote python scripts/mermaid_to_image.py diagrams/ output/ \ --format png --recursive # Da entrada padrão echo "graph TD; A-->B" | python scripts/mermaid_to_image.py - output.png ``` ## Requisitos ### Para Geração de Diagramas - Sistema de habilidade Claude Code (automático) - Guias e modelos (incluídos nesta habilidade) ### Para Validação e Conversão de Imagens ```bash # Instalar mermaid-cli globalmente npm install -g @mermaid-js/mermaid-cli # Verificar instalação mmdc --version ``` ### Para Scripts Python - Python 3.7+ - Nenhum pacote adicional necessário (usa apenas stdlib) ## Trilha de Aprendizado ### Novo em Diagramas Mermaid? 1. **Comece com Diagramas de Atividades** - Leia `references/guides/diagrams/activity-diagrams.md` 2. **Aprenda Símbolos Unicode** - Leia `references/guides/unicode-symbols/guide.md` 3. **Experimente um Exemplo** - Use padrões de `examples/spring-boot/` 4. **Valide seu Trabalho** - Execute `python scripts/extract_mermaid.py --validate` ### Precisa Documentar Código Existente? 1. **Identifique o Framework** - Spring Boot, FastAPI, React, etc. 2. **Carregue o Guia de Exemplo** - Leia `examples/{your-framework}/README.md` 3. **Combine Padrões** - Encontre padrões de código similares nos exemplos 4. **Gere Diagramas** - Use modelos dos guias 5. **Valide** - Use scripts de validação ### Criando Documentos de Design? 1. **Escolha o Tipo de Modelo** - Arquitetura, API, Funcionalidade, Banco de Dados ou Sistema 2. **Carregue o Modelo** - Leia de `assets/{type}-design-template.md` 3. **Preencha as Seções** - Substitua os espaços reservados pelo conteúdo real 4. **Adicione Diagramas** - Carregue guias de diagrama conforme necessário para cada seção 5. **Use Símbolos** - Aprimore com símbolos Unicode por todo 6. **Salve** - Coloque em `docs/design/` com carimbo de data/hora ## Como o Sistema Hierárquico Funciona ### Abordagem Tradicional (Ineficiente) - Carregar toda a documentação da habilidade (~50KB) - A IA processa todos os modelos e exemplos - Alto uso de tokens - Tempo de resposta lento ### Abordagem Hierárquica (Eficiente) 1. **Usuário faz requisição** → IA analisa a intenção 2. **Árvore de decisão é ativada** → Determina os guias necessários 3. **Carrega apenas o necessário** → Lê guia específico (~2-5KB) 4. **Gera saída** → Usa modelos direcionados 5. **Eficiente em tokens** → 10x menos contexto necessário ### Exemplo de Fluxo **Usuário:** "Crie um diagrama de implantação para minha configuração Docker Compose" **Árvore de Decisão:** ``` 1. Analisar: "diagrama de implantação" + "Docker Compose" 2. Determinar: deployment-diagrams.md necessário 3. Carregar: references/guides/diagrams/deployment-diagrams.md (2KB) 4. Encontrar padrão: existe modelo Docker Compose 5. Gerar: usando modelo + símbolos Unicode 6. Saída: diagrama completo em <30 segundos ``` **Tokens Usados:** ~2.000 (vs ~10.000 com a abordagem tradicional) ## Status de Conclusão ✅ **Completo:** - Orquestrador de árvore de decisão hierárquica - Guia de diagrama de atividades com modelos - Guia de diagrama de implantação (AWS, GCP, K8s, serverless, Docker) - Guia de símbolos Unicode (mais de 100 símbolos) - Script de extração Mermaid com validação - Script de conversão Mermaid para imagem - Exemplos de código para diagrama Spring Boot - Modelos de documento de design (5 tipos) - Sistema de estilo de alto contraste 🚧 **Em Progresso:** - Exemplos FastAPI - Exemplos de arquitetura de componentes React - Exemplos de pipeline ETL Python 📋 **Planejado:** - Guia de diagramas de arquitetura - Guia de diagramas de sequência - Guia mestre de código para diagrama - Exemplos Node.js/Express - Exemplos de aplicação web Java ## Contribuindo Para adicionar um novo guia de tipo de diagrama: 1. Crie o guia em `references/guides/diagrams/{type}-diagrams.md` 2. Inclua: - Quando usar - Sintaxe básica - Padrões comuns (3-5 modelos) - Exemplos de símbolos Unicode - Melhores práticas 3. Atualize a árvore de decisão em `SKILL.md` 4. Adicione exemplos com mapeamentos de código Para adicionar um novo exemplo de linguagem: 1. Crie um diretório em `examples/{framework}/` 2. Adicione `README.md` com: - Visão geral do framework - Diagrama de arquitetura a partir da estrutura - Diagrama de implantação a partir da configuração - Diagrama de sequência a partir do código - Diagrama de atividade a partir da lógica 3. Atualize a tabela código-para-diagrama em `SKILL.md` ## Licença Parte das Habilidades Claude Code - Licença MIT ## Habilidades Relacionadas - **confluence** - Fazer upload de diagramas para o Confluence - **plantuml** - Formato de diagrama alternativo ## Links - [GitHub Repository](https://github.com/SpillwaveSolutions/design-doc-mermaid) - [Skilz Marketplace Listing](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/) - [Mermaid Official Documentation](https://mermaid.js.org/) --- **Versão:** 2.0.0 **Atualizado:** 2025-01-13 **Mantido por:** SpillwaveSolutions ## FAQ ### Que tipos de diagramas Mermaid esta habilidade pode gerar? Esta habilidade pode gerar diagramas de atividade, implantação, arquitetura e sequência. Suporta a visualização de fluxos de trabalho, infraestrutura de nuvem, componentes de sistema e interações de API. ### Como funciona a conversão de código para diagrama? A habilidade analisa seu código ou arquivos de configuração (ex: application.yml do Spring Boot) e usa padrões e guias predefinidos para gerar automaticamente diagramas Mermaid correspondentes, como diagramas de implantação ou sequência. ### Posso criar documentos de design completos com esta habilidade? Sim, a habilidade inclui modelos para vários documentos de design (arquitetura, API, recurso, banco de dados, sistema). Pode gerar documentos completos com diagramas Mermaid incorporados com base em sua entrada e no modelo selecionado. ### Quais são os benefícios do sistema hierárquico para gerar diagramas Mermaid? O sistema hierárquico analisa eficientemente sua intenção e carrega apenas os guias e modelos necessários (normalmente 2-5KB) em vez de toda a documentação da habilidade. Isso reduz significativamente o uso de tokens e acelera os tempos de resposta. ### Existem utilitários Python incluídos nesta habilidade? Sim, a habilidade fornece scripts Python para extrair diagramas Mermaid de arquivos Markdown, validar sua sintaxe e convertê-los para os formatos de imagem PNG ou SVG. Esses utilitários também suportam processamento em lote. ### Quais são os requisitos para usar os recursos de validação e conversão de imagem? Para validação de diagramas e conversão de imagem, você precisa ter o \`mermaid-cli\` instalado globalmente via npm (\`npm install -g @mermaid-js/mermaid-cli\`). Os scripts Python requerem Python 3.7+.