Repolode
Enviar
lukilabs

lukilabs/beautiful-mermaid

Uma biblioteca TypeScript que renderiza diagramas Mermaid em SVG personalizável por tema ou texto ASCII/Unicode, sem dependências do DOM.

Ver no GitHub
Estrelas
11,200
Forks
411
Issues abertas
93
Último commit
há 6 meses

O que é?

beautiful-mermaid transforma o código-fonte de diagramas Mermaid em strings SVG ou arte em texto simples ASCII/Unicode. Dá suporte a diagramas de fluxo, de estados, de sequência, de classes e ER, além de gráficos XY com séries de barras, linhas e combinações.

A renderização é síncrona, então a saída SVG pode ser calculada diretamente durante uma renderização do React com useMemo. Os temas são definidos com duas cores — plano de fundo e primeiro plano — e podem incluir cores de destaque e atenuadas. As cores são expostas como propriedades CSS personalizadas, permitindo aplicar mudanças de tema sem renderizar novamente. A biblioteca também inclui 15 temas integrados e pode converter qualquer tema Shiki (VS Code) em cores para diagramas.

O renderizador ASCII é uma adaptação em TypeScript do projeto Go mermaid-ascii, ampliada com suporte a diagramas de sequência, de classes e ER. Ele pode gerar caracteres Unicode de desenho de caixas ou apenas ASCII, com colorização ANSI ou HTML opcional para uso em terminais.

Recursos principais

  • 01Renderiza diagramas de fluxo, de estados, de sequência, de classes, ER e gráficos XY
  • 02Gera SVG para interfaces web ou texto ASCII/Unicode para terminais
  • 03API síncrona que funciona durante a renderização do React com useMemo
  • 04Temas definidos a partir de duas cores, com 15 temas integrados
  • 05Aceita qualquer tema Shiki/VS Code por meio de fromShikiTheme
  • 06Permite trocar de tema em tempo real por meio de propriedades CSS personalizadas

Casos de uso

  • Exibir diagramas de fluxo ou outros diagramas gerados em uma interface de chat com IA ou de agentes
  • Exibir diagramas Mermaid em um app React sem carregamento assíncrono
  • Imprimir diagramas de arquitetura ou de estados em ferramentas CLI e na saída do terminal
  • Combinar as cores dos diagramas com um tema existente do editor ou do app

Início rápido

  1. 1

    Instale o pacote com npm

    npm install beautiful-mermaid
  2. 2

    Renderize um fluxograma em SVG no código

Antes de usar

  • A renderização é síncrona, mas o layout do ELK.js é executado por meio de um bypass de FakeWorker, então diagramas muito grandes podem demorar mais.
  • O README lista apenas seis tipos de diagrama; outros tipos de diagrama do Mermaid não são contemplados.

Tópicos

#mermaid#diagram#svg#ascii#typescript#theming#charts

Perguntas frequentes

O que é beautiful-mermaid?
Uma biblioteca TypeScript que renderiza diagramas Mermaid em SVG personalizável por tema ou texto ASCII/Unicode, sem dependências do DOM. beautiful-mermaid transforma o código-fonte de diagramas Mermaid em strings SVG ou arte em texto simples ASCII/Unicode. Dá suporte a diagramas de fluxo, de estados, de sequência, de classes e ER, além de gráficos XY com séries de barras, linhas e combinações.
beautiful-mermaid é gratuito? Qual é a licença?
beautiful-mermaid é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
beautiful-mermaid ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de beautiful-mermaid foi em 6 de mai. de 2026.
Para que posso usar beautiful-mermaid?
Exibir diagramas de fluxo ou outros diagramas gerados em uma interface de chat com IA ou de agentes Exibir diagramas Mermaid em um app React sem carregamento assíncrono Imprimir diagramas de arquitetura ou de estados em ferramentas CLI e na saída do terminal Combinar as cores dos diagramas com um tema existente do editor ou do app
Como instalar beautiful-mermaid?
Instale o pacote com npm: npm install beautiful-mermaid Renderize um fluxograma em SVG no código
Onde consigo beautiful-mermaid?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/lukilabs/beautiful-mermaid

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados