Zenn
🙄

ChatGPTで図を書いてもらう方法（誰にでもできます）

2023/04/15に公開
Mermaid JS
ChatGPT
tech

はじめに

ChatGPTで図を書いてもらい、感動しているので共有します。

手順

  1. キーワード+ 「mermaidJSで図解して」をつける
  2. MermaidJSのエディターで確認orNotionのコードブロックで確認

1. キーワード+ 「MermaidJSで図解して」をつける

※ChatGPT3.5は文法ミスがたまにあるので、その場合は自分直したりします。
今回は,ChatGPT4.0で試しました

例：Facade デザインパターンをMermaidJSで図解して教えて
Untitled.png

Qiitaのコードブロックだと以下のように表示されます。
usersの部分が文字化けしてますね、

2. MermaidJSのエディターあるいはNotionのコードブロックで確認

Qiitaやzennでも利用できるはずです
Untitled (1).png

Untitled (2).png

MermaidJS Editer

さいごに

正直、Excelやパワポで絵を書くのはだるいです。
コンポーネント、図形の大きさを一括で変更するのも手間なので。
markdownで資料を管理する流れができますように。。

English Translator

How to have a diagram drawn in ChatGPT (anyone can do it)

Introduction

I'm impressed by the diagram drawn on ChatGPT, so I'll share it.

Procedure

  1. Add keyword + "illustrated with mermaidJS"
  2. Check in the MermaidJS editor or check with the code block of Notion

1. Keyword + "illustrated with MermaidJS"

  • ChatGPT3.5 sometimes has grammar mistakes, so in that case, I will correct myself.

This time, I tried it with ChatGPT 4.0.

Example: Illustrating Facade design patterns in MermaidJS

! [Untitled] (https://s3-us-west-2.amazonaws.com/secure.notion-static.com/24fbf66c-ed1f-440b-b064-4b10b73b2850/Untitled.png)

2. Check in the MermaidJS editor

It should work with Notion's code block, or even in Qiita or zenn.

! [Untitled] (https://s3-us-west-2.amazonaws.com/secure.notion-static.com/11047d3a-752c-4ce9-b278-0a4435708126/Untitled.png)

! [Untitled] (https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a533cef6-a184-4408-8a89-986875dca45a/Untitled.png)

[MermaidJS Editer] ([https://mermaid-js.github.io/mermaid-live-editor/](https://mermaid-js.github.io/mermaid-live-editor/edit#pako: eNqVkztvwyAUhf8KYo6HMnrI0qhrpWb1cgM3Lap5lMcQRfnvvYRYJHabKF64oO9yzgF85NIp5D2P-JPRStxo-AxgBsvo8xCSltqDTex11EgDxEu1JN5AgsJC1GpJbPMuHmJC81KoNrtDihtS_ OHLGe8sGTrv2WZ3SHFD0p6Vrbm69bra79lHOZOYWNTGj3qvUTHnMUDS7tJSSWppWVrbjG0I8c1n4-W0Nu9scDeTep9AFjDmMS2UrtIs2f8yiMcZxHUG8UwG0c2kHmQQT2Qops6X2Be9nbZ0YwSScKTXyFfcYDCgFb33Y2kcePpCgwPvqVQQvgc-2BNxkJPbHqzkfQoZVzx7BWn6N -ri6RdEqiJS))

Finally

To be honest, it's lazy to draw pictures in Excel or PowerPoint.
It is also troublesome to change the size of components and shapes all at once.
I hope you can manage materials in Markdown.

Discussion