Getting Started
This tutorial will guide technical writers through the process of using ChatGPT to build Graphviz graphics in Discourse. We will use the topic “Introduction to Blockchain” as an example.
Introduction to Graphviz
Graphviz is an open-source graph visualization software that allows you to represent structural information as diagrams of abstract graphs and networks. It’s highly versatile and finds applications across various fields such as networking, bioinformatics, and software engineering. Graphviz takes descriptions of graphs in a simple text language and generates diagrams in various formats including images, SVG, PDF, and Postscript. It offers features like color options, fonts, tabular node layouts, line styles, hyperlinks, and custom shapes.
Discourse Graphviz Plugin
Discourse, a platform for community discussions, offers a Graphviz plugin that allows users to embed graphs in posts using the DOT language. The plugin uses the Viz.js library to render graphs. You can define the layout engine attributes or leave it to default to the ‘dot’ engine. To embed a graph, wrap the Graphviz script in [graphviz engine=dot] and [/graphviz].
Step 1: Define Your Topics and Subtopics
First, outline the topics and subtopics you want to discuss or provide ChatGPT with an existing tutorial. For an “Introduction to Blockchain,” let’s choose one topic as an example:
- The Basic Structure of Blockchain
Step 2: Get Visualization Recommendations
Now, ask ChatGPT for recommendations on how to visualize this topic. For instance, you can ask:
ChatGPT, can you recommend a possible graphic that could be used to describe the basic structure of a blockchain?
ChatGPT will then provide you with suggestions on the type of graphic that might be suitable.
Step 3: Build the Visuals with Graphviz
After getting a suitable recommendation, request ChatGPT to generate a Graphviz script for that graphic. For instance:
Use Graphviz to illustrate this point: “Blockchain as a series of blocks, where each block is linked to the previous one. Make the background color #110219 and nodes and edges white”
These colors match the graphic to the dark mode version of Celo Academy…
Step 4: Iterate on the Graphics
Once you have the initial Graphviz script, inspect it, and see if there’s anything you’d like to change or add. You can request ChatGPT to make modifications to the script.
Step 5: Implement the Graphics in Discourse
Finally, insert the Graphviz script into your Discourse post. Make sure to wrap the script in [graphviz engine=dot] and [/graphviz].
Example: The Basic Structure of Blockchain
Let’s put this into practice by creating a graphic that shows the basic structure of a blockchain.
We can start by asking ChatGPT to create a Graphviz script that illustrates a blockchain as a series of linked blocks.
Example Graphviz Code from ChatGPT
[graphviz engine=dot]
digraph G {
rankdir=LR;
node [shape=record];
// Graph & Node styles
graph [bgcolor="#110219"];
node [fontcolor=white, color=white];
edge [color=white];
block1 [label="Block 1"];
block2 [label="Block 2"];
block3 [label="Block 3"];
block1 -> block2;
block2 -> block3;
}
[/graphviz]
This script creates a simple diagram showing three blocks, where each block is linked to the previous one, representing the basic structure of a blockchain.
Now, insert this Graphviz script into your Discourse post using the [graphviz engine=dot] tags.
Example Illustration of a Blockchain using the Code Above
A More Complex Example
While the example above is very simple, it’s possible to make much more complex diagrams using this same process.
ChatGPT, Create a Graphviz visualization that depicts an image from the description below. Make the background color #110219 and nodes and edges white.
Blockchain Structure
Depict a series of interconnected blocks.
Each block contains multiple transactions.
Zoom into a single block to show its contents: transaction data, timestamp, nonce, and hashes (previous hash and current hash).
Here is the resulting code:
[graphviz engine=dot]
digraph G {
rankdir=LR;
// Graph & Node styles
graph [bgcolor="#110219"];
node [fontcolor=white, color=white];
edge [color=white];
// Define blocks
block1 [shape=record, label="{Block 1|{Transactions|Previous Hash|Timestamp|Nonce|Hash}}"];
block2 [shape=record, label="{Block 2|{Transactions|Previous Hash|Timestamp|Nonce|Hash}}"];
block3 [shape=record, label="{Block 3|{Transactions|Previous Hash|Timestamp|Nonce|Hash}}"];
block4 [shape=record, label="{Block 4|{Transactions|Previous Hash|Timestamp|Nonce|Hash}}"];
// Define connections
block1 -> block2 [arrowhead=open];
block2 -> block3 [arrowhead=open];
block3 -> block4 [arrowhead=open];
// Zoom into the contents of Block 3
contents [shape=record, label="Contents of Block 3|{Transaction Data:|Timestamp:|Nonce:|Previous Hash:|Hash:}", fontsize=10];
block3 -> contents [label="Zoom In", fontsize=10, dir=back];
}
[/graphviz]
Here is the final image:
Conclusion
Using ChatGPT in tandem with the Graphviz plugin in Discourse can help technical writers to create engaging and illustrative graphics for complex topics like blockchain. Take time to iterate on your graphics and use the features of Graphviz to enhance the visual quality and information clarity. The combination of a powerful AI tool like ChatGPT and the flexibility of Graphviz enables you to create content that is both informative and visually engaging.
Remember that while ChatGPT can be a great tool for generating the initial visuals, your expertise and judgment as a technical writer are essential for fine-tuning and ensuring the accuracy of the content. Don’t hesitate to make iterations and customizations to the graphics to better suit the message you are trying to convey.
Happy writing and visualizing!