Renderização de Diagramas Mermaid com beautiful-mermaid
Renderiza arquivos .mmd do Mermaid em SVG estilizados usando beautiful-mermaid v1.0.2 e bun.
Conteúdo da Skill
| Arquivo | Propósito |
|---|---|
render-mermaid.ts | Ferramenta CLI: renderiza arquivos .mmd para SVG |
gemini-diagram-prompt.md | Prompt para geração de imagens no Gemini |
Instalação
Apenas bun é necessário. A dependência beautiful-mermaid é instalada automaticamente pelo bun na primeira execução.
# macOS
brew install oven-sh/bun/bun
# Ou instalador universal
curl -fsSL https://bun.sh/install | bash
Referência da CLI
render-mermaid — Renderiza arquivos .mmd do Mermaid em SVG com tema
Uso:
bun run render-mermaid.ts [opções] <entrada.mmd...>
echo 'graph TD; A-->B' | bun run render-mermaid.ts -o saída.svg
Opções:
-o, --output <arquivo> Arquivo de saída (apenas para uma única entrada)
--outdir <dir> Diretório de saída para múltiplos arquivos
-t, --theme <nome> Tema (padrão: tokyo-night)
--list-themes Lista temas disponíveis
--help Exibe esta ajuda
Padrão de saída: Sem -o ou --outdir, escreve <nome>.svg adjacente a cada arquivo de entrada (-d é consumido pelo bun run; use --outdir).
Atalho: Defina MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts para comandos mais curtos.
Exemplos
MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts
# Renderizar um único arquivo (saída ao lado da entrada)
bun run $MERMAID diagrama.mmd
# Renderizar para uma saída específica
bun run $MERMAID diagrama.mmd -o bonito.svg
# Renderizar todos os arquivos .mmd para um diretório de saída
bun run $MERMAID docs/diagramas/*.mmd --outdir docs/diagramas
# Tema diferente
bun run $MERMAID -t dracula diagrama.mmd
# Pipe a partir do stdin
echo 'graph TD; A-->B-->C' | bun run $MERMAID -o rapido.svg
# Listar temas
bun run $MERMAID --list-themes
Diagramas do Projeto
Arquivos fonte Mermaid (.mmd) e saída renderizada (.svg) em docs/diagramas/, além de um fonte na raiz do repositório:
| Fonte | Descrição |
|---|---|
docs/diagramas/politica-autofile.mmd | Fluxograma da política AutoFile |
docs/diagramas/autorun-tres-estagios.mmd | Fluxograma de autorun em três estágios |
arquitetura-autorun.mmd | Arquitetura completa (complexo demais para beautiful-mermaid) |
Regenerar:
bun run $MERMAID docs/diagramas/*.mmd --outdir docs/diagramas
Limitações Conhecidas
- Diagramas complexos com subgrafos profundamente aninhados podem encontrar bugs no layout do dagre. Diagramas com falha são reportados, mas não bloqueiam outras renderizações.
- O front matter
%%{init:...}%%é removido automaticamente (beautiful-mermaid aplica sua própria estilização).
<image_generation>
Geração de Imagens com Gemini
gemini-diagram-prompt.md contém um prompt para o Gemini gerar uma imagem de visão geral do projeto focada em resultados. Copie o prompt para uma conversa no Gemini.
</image_generation>