Apresentando, um elemento personalizado para exibir diagramas Mermaid – Bram.us
~
~
Olhando as demonstrações de Chris, vejo que o CodePen depende de blocos de código Markdown com crases (```mermaid) para renderizar os diagramas. Ver isso em ação me fez pensar: existe um elemento personalizado independente para colocar diagramas Mermaid de forma declarativa em qualquer página da web? Acontece que não havia.
Então construí um, auxiliado pela Antigravidade:
É um componente da web sem configuração e sem dependências que renderiza diagramas Mermaid dentro de um Shadow DOM aberto. Basta importar o script e colocar a sintaxe do Mermaid diretamente dentro do elemento personalizado:
graph TD
Client(Client Request) --> LB(Load Balancer)
LB --> Server1(Server 01)
LB --> Server2(Server 02)
(Sim, você também pode obter o componente do npm)
~
Por padrão, mermaid atributo. Basta definir mermaid para uma string de versão (por exemplo mermaid="10.9.8") ou um URL completo e
O componente também vem com um cache na memória integrado. Se você tiver vários diagramas na mesma página, eles farão o download do Mermaid apenas uma vez. Além disso, se o seu aplicativo já inclui o Mermaid, você pode atribuir sua própria cópia ao MermaidElement.defaultMermaid para ignorar completamente as solicitações externas de CDN.
~
Também construí um playground interativo para mostrar alguns exemplos e como você pode configurar o componente. O HTML resultante é mostrado logo abaixo da visualização, pronto para você copiar e colar:
Veja a caneta
no CodePen.
O
~
Confira a documentação ao vivo ou pegue o pacote do npm:
~
🔥Gostou do que viu? Quer ficar por dentro? Veja como:
Também posso ser encontrado no 𝕏 Twitter e no 🐘 Mastodon, mas só posto lá esporadicamente.
