Nenhum conhecimento profundo do script Mermaid é necessário

Como aprendemos em meu artigo anterior, ChatGPT e arquitetura de software , o ChatGPT pode criar diagramas usando o script Mermaid.

Neste artigo, quero expandir ainda mais esse recurso, pois a criação de diagramas raramente é fácil e geralmente complicada e frustrante.

A ajuda de uma ferramenta automatizada pode economizar significativamente tempo, esforço e sanidade! Mas, o ChatGPT não vem com um manual e, para uma IA, é incerto o que faz e o que não sabe, pois é cedo.

Portanto, artigos como este se tornam essenciais à medida que acumulamos conhecimento sobre como usar esse recurso incrível de maneira eficaz.

Antes de continuarmos, deixe-me dizer que o ChatGPT não acredita que possa criar diagramas. Ele reclamará com um erro quando solicitado a fazer um:

No entanto, isso está longe de ser o caso. A chave aqui é entender como desbloquear as habilidades de diagramação do ChatGPT.

O que é o roteiro da sereia?

A forma como o ChatGPT desenha diagramas é criar um script em uma linguagem chamada Mermaid.

Depois de criados, esses scripts podem ser copiados e colados em um editor, comohttps://mermaid.live/ouhttps://mermaid-js.github.io/um diagrama pode ser salvo em um formato de imagem popular, como SVG ou PNG.

Com o que estou prestes a mostrar, você não precisará de um conhecimento profundo do script Mermaid.

Começando

Como mencionei em meu artigo anterior, é essencial gastar tempo criando uma pergunta inicial abrangente, pois isso define o contexto para o restante da sessão do ChatGPT.

Se você quer ter uma conversa que dê frutos, então, para continuar a metáfora, trate sua pergunta inicial como se fosse uma semente germinando. Coloque sua semente em uma caixa de perguntas fechadas e sua sessão parará de crescer rapidamente.

Mas se você colocar a pergunta inicial em um lugar onde há muitos caminhos a serem explorados, a conversa crescerá e florescerá, permitindo que você obtenha o melhor da ferramenta.

Neste artigo, demonstrarei duas maneiras de criar diagramas. O primeiro é onde darei um começo útil ao ChatGPT, e o segundo é onde começaremos inteiramente do zero.

Portanto, vamos começar com um exemplo simples em que criei um script Mermaid para o ChatGPT para definir o cenário para esta conversa. Observe que eu uso um esquema de cores, então o diagrama se assemelha ao padrão de modelagem C4.

Então foi isso que copiei no prompt do ChatGPT para iniciar o processo:

flowchart TB

subgraph Customer[Personal Banking Customer]
    h1[-Person-]:::type
    d1[A customer of the bank, with \n a bank account]:::description
end
Customer:::person

subgraph BankingApp[Banking App]
    h2[-Software System-]:::type
    d2[Allows customers to view \n manage their accounts \n and make payments]:::description
end
BankingApp:::internalSystem

subgraph BankingSystem[Banking System]
    h3[-Software System-]:::type
    d3[Provides all the services \n to manage all customer, \n accounts, transactions etc]:::description
end
BankingSystem:::externalSystem


%% Relationships

Customer--Views account \n balances, and \n makes payments \n using-->BankingApp
BankingApp--Gets accounts \n information from, \n and makes \n payments using-->BankingSystem

%% Element type definitions

classDef person fill:#08427b
classDef internalSystem fill:#1168bd
classDef externalSystem fill:#999999

classDef type stroke-width:0px, color:#fff, fill:transparent, font-size:12px
classDef description stroke-width:0px, color:#fff, fill:transparent, font-size:13px

Agora vamos ver se o ChatGPT entende como é um sistema bancário. Enviei o prompt “Adicione um banco a este diagrama”:

O texto retornado do ChatGPT fez este diagrama:

O ChatGPT adicionou de forma inteligente o banco estabelecendo corretamente uma relação entre o cliente e o sistema bancário. Esse nível de automação é o motivo pelo qual as pessoas estão usando essa ferramenta.

Adicionando componentes

Agora vamos ver como o ChatGPT se sai com mais duas adições. Meu prompt foi "adicionar cartão de crédito e comprar"

ChatGPT retorna o código Mermaid para produzir a seguinte imagem:

Mais uma vez, o ChatGPT adicionou os novos componentes, entendeu a relação entre eles e os criou no estilo que estabeleci inicialmente com todas as cores certas.

Agora vamos ver como o ChatGPT se sai com uma pergunta obscura: “Adicionar cenouras”

O ChatGPT determinou uma conexão lógica entre os componentes existentes e a nova adição, pois retorna um novo diagrama de sereia com o seguinte resumo:

Alteração de Relacionamentos

O ChatGPT criou relacionamentos perfeitamente lógicos, mas e se o ChatGPT perder uma conexão? Como você adiciona um?

Para criar um relacionamento, seja específico sobre quais componentes estão envolvidos e qual é o relacionamento. Enviei o prompt “adicionar relacionamento entre cliente e cenoura. A relação é de compra”.

O código que o ChatGPT retornou fez o script Mermaid produzir este diagrama. Como você pode ver, o novo relacionamento está em vigor.

Removendo componentes e relacionamentos

Assim, aprendemos como criar componentes e adicionar e atualizar relacionamentos. A próxima tarefa é removê-los, o que é simples.

A remoção de um componente também removerá os relacionamentos, o que fará com que o diagrama volte a ter a aparência da Figura 7.

Mudanças nos detalhes

Até agora, você está tendo a ideia de que fazer alterações nos diagramas no ChatGPT é simples.

Trata-se de ser inequívoco sobre o que você pede ao ChatGPT para fazer. No entanto, sei que da próxima vez que você criar um diagrama, ele pode não incluir coisas sobre as quais o ChatGPT saberá, porque será específico para sua organização, processo ou circunstância que o sistema de IA não conhece.

Um bom exemplo é: pedi ao ChatGPT para “adicionar um gerente”:

…e o ChatGPT respondeu assim:

O ChatGPT, sem contexto, assumiu que a função de gerente é para o Sistema Bancário quando o gerente poderia ser o gerente da loja ou qualquer outro relacionamento, por exemplo.

Portanto, para corrigir a descrição, é melhor ser bem específico. Eu disse “mude a descrição do gerente para “um gerente que administra a loja”:

… e o ChatGPT respondeu com o seguinte:

Criando um diagrama de sereia do zero com ChatGPT.

No exemplo anterior, iniciei um diagrama no script Mermaid e depois alterei o script usando o ChatGPT.

Agora vou demonstrar como construir um diagrama do zero com o ChatGPT.

Novamente, trata-se de enquadrar a pergunta inicial corretamente antes que você possa desenvolvê-la na miríade de maneiras que mostrei anteriormente.

Prompt: crie um script de sereia de um sistema bancário em que um cliente tenha um cartão bancário e um aplicativo bancário

….ChatGPT responde com este texto para construir um diagrama de sequência. Claro, você pode especificar outros tipos de diagramas, mas apenas a partir do repertório de scripts Mermaid.

Encontre mais tipos de diagramas aqui .

sequenceDiagram
participant Customer
participant Banking Card
participant Banking App
participant Bank

Customer->>Banking Card: Swipe/Insert
Banking Card->>Bank: Send card details
Bank->>Banking Card: Authorize
Banking Card->>Customer: Approve or Decline

Customer->>Banking App: Login
Banking App->>Bank: Request account information
Bank->>Banking App: Send account information
Banking App->>Customer: Display account information

Customer->>Banking App: Initiate transaction
Banking App->>Bank: Request authorization
Bank->>Banking App: Authorize/Decline
Banking App->>Customer: Approve/Decline

Vou deixar uma última dica: se você não gostar do que pediu com uma etapa, pode desfazê-la digitando “esquecer última etapa”:

Eu realmente espero que você goste de fazer muitos novos diagramas com esta nova habilidade.