3 pontos por GN⁺ 2025-10-27 | 1 comentários | Compartilhar no WhatsApp
  • D2 é uma linguagem de scripting baseada em texto para criar diagramas, oferecendo uma forma de gerar materiais visuais automaticamente a partir de código
  • O usuário define nós e relacionamentos com uma sintaxe simples, e o motor de layout automático os posiciona visualmente
  • Cada snippet de código na documentação pode ser executado e editado diretamente no Playground, permitindo verificar o resultado imediatamente
  • No entanto, há exceções em que alguns exemplos que usam import não podem ser executados diretamente no Playground
  • Tem valor para desenvolvedores como uma ferramenta que aumenta a automação da documentação visual e a eficiência da colaboração

Visão geral do D2

  • D2 é uma linguagem de scripting declarativa que permite escrever diagramas como código, oferecendo a capacidade de definir estruturas complexas em texto e visualizá-las automaticamente
    • O usuário descreve nós, arestas, grupos etc. com uma sintaxe simples
    • O resultado é organizado automaticamente, e vários estilos podem ser aplicados
  • A linguagem é vantajosa para controle de versão e colaboração e pode ser integrada com facilidade a code review ou pipelines de automação de documentação

Recursos do Playground

  • Cada snippet de código da documentação do D2 oferece um recurso interativo para abrir, editar e executar diretamente no Playground
    • Ao passar o mouse sobre o snippet, o link do Playground é ativado
    • Isso permite ajustar o diagrama em tempo real e verificar visualmente o resultado
  • Porém, há uma limitação: snippets que usam instruções import não podem ser executados imediatamente no Playground, pois exigem recursos externos

Significado prático

  • O D2 oferece a vantagem de dar suporte à automação da documentação visual, permitindo gerenciar design de sistemas ou fluxo de dados junto com o código
  • Ao permitir que desenvolvedores e designers definam diagramas na mesma linguagem, melhora a eficiência da colaboração
  • É avaliado como uma ferramenta que promove a padronização da criação de diagramas baseada em código no ecossistema open source

1 comentários

 
GN⁺ 2025-10-27
Comentários no Hacker News
  • Como co-criador do D2, estou pensando recentemente em ideias para expandir os recursos de animação
    Publiquei a discussão relacionada no GitHub Discussion e gostaria de ouvir opiniões

    • Tenho usado LLMs recentemente para visualizar rapidamente decisões de arquitetura
      Uso principalmente o mermaid, mas fico curioso se o D2 poderia oferecer uma interface mais flexível
      Também gostaria de saber se há planos para recursos de chamada de ferramentas integrados a LLMs ou interfaces amigáveis como MCP
    • Acho que o D2 é uma ferramenta realmente incrível. Foi especialmente útil ao implementar a automação de layouts de rede da AWS
      Também foi ótimo não precisar brigar com o motor ao renderizar muitos objetos
      Mas a documentação do sdk/d2lib era insuficiente e no começo houve tentativa e erro
    • Uso o D2 há alguns meses e me surpreendi com a facilidade de aprendizado
      Mas não acho que animações extravagantes sejam realmente necessárias. Quando é preciso destaque, simplesmente mudar a cor é mais intuitivo
    • Fico curioso sobre o objetivo das animações. Seria bom se, ao clicar durante uma apresentação, elementos fossem adicionados e as conexões fossem suavemente destacadas
      Por outro lado, se mudanças de texto fizerem o diagrama inteiro tremer, isso pode acabar sendo mais distração do que ajuda
      Além disso, seria ótimo ter suporte oficial a diagramas swimlane
    • “Level 4 - dramatic mode ;)”, compartilhando um exemplo de SVG dramático
  • Estou tentando fazer script de diagramas orientado por dados envolvendo ferramentas como D2 ou Penrose em Python
    Mas a maioria das ferramentas declarativas não oferece suporte ao fluxo de trabalho “declare, then tweak”, o que é incômodo
    No Penrose, editar é fácil, mas o resultado tem um lado aleatório e imprevisível

    • O ajuste de layout personalizado do D2 só é possível no motor proprietário
      No motor open source isso não é possível, mas dá para fazer alguns ajustes com o recurso Freehand
  • Fiquei curioso sobre o quanto seria possível implementar a sintaxe do D2 de forma próxima em uma linguagem de programação geral
    Em Python, por causa das limitações de sobrecarga de operadores, é difícil ter uma DSL totalmente idêntica, mas dá para tentar algo parecido com sobrecarga de operadores de string

    • Mesmo em Python, com alguns truques, dá para imitar uma sintaxe como a <- b | "edge"
      Mas brincam que, se alguém usar isso de verdade, vou assombrar essa pessoa como um fantasma
    • Em Scala, como há operadores definidos pelo usuário, dá para criar uma DSL como "x" --> "y" | "hello world"
      Mas exagerar nisso não é uma boa ideia
    • Em Ruby, também é possível implementar uma DSL interna simples no formato x >> y << "label"
      Também dá para criar um modelo de objetos em uma classe Diagram e acoplar um renderizador
  • Como autor principal do projeto mgmt, lido muito com DAGs
    Ao adicionar e remover nós e arestas, preciso de diagramas visualmente estáveis e com transições animadas
    O Graphviz é inconveniente porque o layout muda a cada snapshot

    • Com o recurso watch do d2, dá para obter um efeito parecido com um hack simples de script que substitui arquivos passo a passo
  • O modo Sketch e os recursos interativos do D2 são realmente úteis
    Tooltips e links aumentam bastante a utilidade dos diagramas

  • Uso o D2 há bastante tempo e também o recomendo ativamente internamente
    Mas o custo da licença enterprise é alto demais, então acabo usando só para uso pessoal
    A licença TALA custa 3.000 dólares por ano, e até a pessoal custa 120 dólares, o que pesa
    Acho revolucionário o recurso de colocar um Helm chart ou descrição de sistema em um LLM para gerar diagramas automaticamente

    • Pessoalmente, acho que a qualidade de saída do TALA é a pior. Na maioria das vezes uso o motor ELK
  • Recentemente, o suporte a renderização ASCII do D2 virou assunto
    A discussão relacionada continua em este post anterior

  • O D2 já existe há bastante tempo, mas ainda passa a sensação de ser menos conhecido que o mermaid
    Em termos de funcionalidade, é muito superior, então seria bom se mais gente o conhecesse

    • Eu também prefiro o D2, mas o mermaid é uma escolha prática porque tem suporte nativo em várias plataformas
    • Conheci o D2 agora e fiquei curioso sobre em que ele é melhor que o mermaid
  • Na nossa plataforma de IA zo.computer, adotamos o D2 como ferramenta de geração de diagramas
    Ele é mais expressivo que o mermaid, então é adequado para visualização baseada em IA

    • Fiquei curioso sobre a implementação. Perguntam se foi construído diretamente um servidor MCP para D2
    • “Ben, obrigado por tornar o LinkedIn/X suportável”, diz a mensagem de agradecimento
  • O D2 é excelente, mas falta um diferencial decisivo em relação ao PlantUML ou ao mermaid
    Ainda estou esperando o “aplicativo matador para código de diagramas

    • Seria uma grande vantagem se fosse possível explorar visualmente grandes codebases com ferramentas desse tipo
    • A vantagem do D2 é ser um compilador standalone e oferecer suporte a renderização ASCII
      Também gosto de não precisar instalar via npm
      Mas o mermaid tem integração excelente com ferramentas como o Obsidian
    • Levantam a pergunta: “Que funcionalidades esse programa matador deveria ter?”