Repolode
Enviar
obsidianmd

obsidianmd/pele

Um renderizador leve e síncrono que converte texto de diagramas Mermaid em SVG, sem dependências em tempo de execução.

Ver no GitHubSite
Estrelas
2,219
Forks
65
Issues abertas
23
Último commit
ontem

O que é?

Pele converte o código-fonte de diagramas Mermaid em SVG. O projeto tem como alvo a sintaxe do Mermaid 12.1.0 e oferece suporte a todos os tipos de diagrama incluídos nessa versão, com layout e estilo visual próprios, diferentes dos usados pelo Mermaid.

A renderização é síncrona e não tem dependências em tempo de execução. As cores e fontes são controladas por variáveis CSS, permitindo que um diagrama siga o tema da página e se atualize quando o tema muda, sem precisar ser renderizado novamente. No navegador, um helper de montagem renderiza o diagrama em um elemento, lê as fontes do CSS e adapta o layout à largura do contêiner. A entrada principal inclui todos os tipos de diagrama, mas tipos individuais podem ser registrados ou carregados sob demanda para reduzir o tamanho do bundle.

O projeto faz escape do texto dos diagramas, filtra links e estilos e limita o tamanho da entrada e da saída, além de orientar sobre o tratamento de diagramas não confiáveis. Ele é distribuído pelo npm e também pode ser carregado de um CDN como um script global.

Recursos principais

  • 01Renderiza em SVG todos os tipos de diagrama incluídos no Mermaid 12.1.0.
  • 02Não tem dependências em tempo de execução e faz renderização síncrona.
  • 03Define cores e fontes por meio de variáveis CSS que acompanham as mudanças de tema.
  • 04Oferece um helper de montagem no navegador que adapta o layout à largura do contêiner.
  • 05Permite carregar tipos individuais de diagrama sob demanda para reduzir o tamanho do bundle.
  • 06Faz escape do texto e filtra links e estilos para aceitar entradas não confiáveis.

Casos de uso

  • Renderizar diagramas Mermaid em páginas da web ou sites de documentação sem uma dependência pesada.
  • Incorporar diagramas que acompanhem o tema claro ou escuro de um site por meio de CSS.
  • Gerar diagramas SVG a partir de texto Mermaid no servidor ou em ferramentas de build.
  • Reduzir o payload de JavaScript carregando apenas os tipos de diagrama usados pela página.

Início rápido

  1. 1

    Instale o pacote

    npm install pele
  2. 2

    Importe render e converta o texto Mermaid para SVG

Antes de usar

  • O README não informa uma licença; os metadados mostram NOASSERTION, embora o README mencione MIT.
  • O Pele tem como alvo a sintaxe do Mermaid 12.1.0 e usa seu próprio layout e estilo visual, portanto o resultado pode ser diferente do Mermaid.

Tópicos

#mermaid#diagrams#svg#typescript#visualization#javascript#charts#diagramming#mermaid-diagrams#mermaidjs

Perguntas frequentes

O que é pele?
Um renderizador leve e síncrono que converte texto de diagramas Mermaid em SVG, sem dependências em tempo de execução. Pele converte o código-fonte de diagramas Mermaid em SVG. O projeto tem como alvo a sintaxe do Mermaid 12.1.0 e oferece suporte a todos os tipos de diagrama incluídos nessa versão, com layout e estilo visual próprios, diferentes dos usados pelo Mermaid.
pele é gratuito? Qual é a licença?
pele é open source sob a licença Other. Confira os termos da licença antes de usá-lo em produtos comerciais.
pele ainda é mantido?
Manutenção ativa. O último commit de pele foi em 18 de out. de 2026.
Para que posso usar pele?
Renderizar diagramas Mermaid em páginas da web ou sites de documentação sem uma dependência pesada. Incorporar diagramas que acompanhem o tema claro ou escuro de um site por meio de CSS. Gerar diagramas SVG a partir de texto Mermaid no servidor ou em ferramentas de build. Reduzir o payload de JavaScript carregando apenas os tipos de diagrama usados pela página.
Como instalar pele?
Instale o pacote: npm install pele Importe render e converta o texto Mermaid para SVG
Onde consigo pele?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/obsidianmd/pele

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

Projetos relacionados