Pular para o conteúdo

Exemplo de Mermaid

Esta página demonstra o suporte a Mermaid.js do BlogBlade. Os diagramas abaixo são convertidos para SVG durante o build e publicados inline, sem runtime JavaScript ou CDN no navegador.

Fluxo de publicação

Fluxo de publicação do BlogBladeO conteúdo MDX passa pelo build e vira HTML, CSS e SVG estáticos.

Content/

php blog build

MarkdownParser

mmdc + Chromium

SVG inline

dist/

Sequência de renderização

Sequência de renderização de um diagramaO parser identifica o fence, o renderer chama o Mermaid CLI e o HTML recebe o SVG.mmdcMermaidRendererMarkdownParserDocumento MDXmmdcMermaidRendererMarkdownParserDocumento MDXfence mermaiddefinição do diagramagerar SVGSVGSVG namespacedfigure com SVG inline

Estado do build

Estado do buildO build valida as dependências antes de renderizar páginas e publicar a saída.

mmdc e Chromium disponíveis

dependência ausente

diagramas válidos

definição inválida

Validando

Renderizando

Falhou

Publicado

O recurso é controlado por feature.mermaid em config.yaml. A aparência é customizada pelo mapa mermaid e pelo arquivo opcional Content/assets/css/mermaid.css. O exemplo deste projeto está habilitado; em um site consumidor, a feature pode ser desligada com feature.mermaid: false.