DEV Community

Jhony Walker
Jhony Walker

Posted on • Edited on

GitHub - Adiciona Mermaid para suporte nativo para ferramenta de diagramação

Octocat Surf Mermaid

Nós desenvolvedores supostamente vemos um aumento de produtividade de 50% quando a documentação é detalhada e disponível em diferentes formatos, mas anteriormente, se você quisesse incluir imagens e/ou diagramas em arquivos Markdown no GitHub, era necessário incorporar uma imagem. A partir de então, no entanto, os desenvolvedores agora podem incluir diagramas e fluxogramas gerados usando a popular linguagem Mermaid. Portanto, o que aconteceu é que o GitHub adiciona Mermaid para suporte nativo para ferramenta de diagramação baseada em JavaScript.

Isso permitirá que os usuários compartilhem informações por meio de formatos visuais ricos, oferecendo melhor gerenciamento e qualidade de projetos e fluxo de trabalho aprimorado.

A diagramação e a documentação custam um tempo precioso do desenvolvedor e ficam desatualizadas rapidamente. No entanto, não ter diagramas ou documentação prejudica a produtividade e dificulta o aprendizado organizacional.

A Mermaid aborda essa situação Catch-22 reduzindo o tempo, o esforço e as ferramentas necessárias para criar diagramas e gráficos modificáveis que, por sua vez, resultam em conteúdo mais inteligente e reutilizável.

Mermaid, como uma ferramenta de diagramação baseada em texto, permite atualizações rápidas e fáceis e torna a documentação muito mais fácil. Ele também pode ser incluído em scripts de produção e outras partes de código conforme a necessidade.

O diretor de relações com desenvolvedores do GitHub, Martin Woodward, explica que o Mermaid “suporta vários tipos de diagramas comuns para projetos de software, incluindo fluxogramas, UML, gráficos Git, diagramas de jornada do usuário e até o temido gráfico de Gantt”. Adicionar diagramas Mermaid à documentação do GitHub é muito simples. Ao marcar um bloco de código como mermaid um iframe será gerado. Ele então pega a sintaxe bruta do Mermaid e passa para o Mermaid.js, transformando esse código em um diagrama em seu navegador onde você pode exportá-lo ou simplemente pegar o link e adicionar no seu readme, para isso basta acessar por aqui.

Fontes onde pesquisei esse conteúdo:

Top comments (0)