Disclaimer: This article uses the software NeoBoard from my current employer. All opinions are my own. My employer is not responsible for any of my doings described in this article.
NeoBoard allows to collaboratively edit whiteboards. The novel thing about NeoBoard is that it uses Matrix rooms for storage. Alternatively, whiteboards can be stored as a JSON file - which is where I got a lot of fun ideas on how to generate NeoBoards automatically.
As the title suggests, I tried generating some slides using an AI. In my opinion, it went surprising well for a first attempt.
Its first NeoBoard
I opened a new Markdown file and wrote down what NeoBoards are. The file is linked at the end of this article. It contains a description of available elements and what properties can be found on shapes like rectangles, circles and lines. For better results, I also designed an empty graph and threw it in as a template.
Create a NeoBoard with a chart. The x-axis shows time and the y-axis shows distance. Plot the speed of an accelerating train in the first 30 seconds after leaving a station. Reply with nothing but the JSON data.
ChatGPT correctly changed the text of my template and added the line. It also picked the color for the line. Tonight, ChatGPT has likely created its first ever NeoBoard. Good job! 👏
And I learned that I have to be more specific about not drawing outside the slide’s boundaries.
Raising the complexity slightly
With units like meters and seconds being measurable, I wanted to get a better idea of the values. So I added another template with values next to the axes, before asking it to create a more complex chart with two lines.
Create a NeoBoard with a chart. The x-axis shows distance and the y-axis shows altitude. Plot the altitude of a plane and a car crossing the alps.
02-plane-and-car-crossing-the-alps.nwb
This is slightly edited. ChatGPT drew the two lines (red for the plane and blue for the car) underneath the chart, so I moved them up. To be fair… it’s quite hard to position them correctly without being able to see. I had given no examples of an actual polyline in any of the templates.
From a logical perspective, this seems passable. The car seems to go higher than the highest peak of 4,808 m and the altitude of the plane also looks a bit odd, but it produced what I expected. Nice!
As a little titbit, it put comments on the points of the graphs. Sadly, I had to remove these to make the JSON valid.
[{
"position": { "x": 200, "y": 880 },
"type": "path",
"kind": "polyline",
"points": [
{ "x": 0, "y": 680 }, // Car starts at sea level
{ "x": 200, "y": 600 }, // Car reaches base of Alps
{ "x": 500, "y": 500 }, // Car is halfway through the Alps
{ "x": 800, "y": 200 }, // Car reaches highest point in Alps
{ "x": 1000, "y": 500 } // Car comes down
],
"strokeColor": "#0000FF" // Blue for car
},
{
"position": { "x": 200, "y": 880 },
"type": "path",
"kind": "polyline",
"points": [
{ "x": 0, "y": 600 }, // Plane starts climbing
{ "x": 200, "y": 400 }, // Plane ascends
{ "x": 500, "y": 200 }, // Plane flies high above the Alps
{ "x": 800, "y": 100 }, // Plane at cruising altitude
{ "x": 1000, "y": 150 } // Plane begins descent
],
"strokeColor": "#FF0000" // Red for plane
}]
ChatGPT, let’s plan a retro!
Then it was time for a challenge. With me explaining mostly graphs, would an LLM be able to create something I didn’t teach it? Would it adhere to the dimensions of the slide? Would it correctly guess how to create multiple slides? Only one way to find out!
I am a SCRUM Facilitator at a Tech startup. Create a NeoBoard with multiple slides for my upcoming retro. We have five developers on our team. Their names are Alex, Berta, Charles, Emily and Frida. First, ask the team how they are doing. Then, prepare notepads for them to write down what went well and what they would like to see improved. Also, every team member gets 3 key emojis to vote on the notepads of others. Place them in the corner of the slide. Lastly, prepare notepads for them to write down how they would improve found issues.
The first slide got copied 1-to-1 from my templates. Fair enough. That’s what the templates are for.
Mhh, It didn’t create notepads. And it gave the entire team three keys, instead of three keys per member. 😔
On the bright side, it correctly created three slides and positioned all text boxes evenly within the whiteboard boundaries. They look slightly uneven because of dynamic font sizes, but that’s outside of ChatGPT’s control. Very impressive! 👏
Conclusion
Overall, ChatGPT did an amazing job! It added and modified slide elements in ways that would have been impossible with regular programming. Generative models in NeoBoard isn’t something I would blindly trust or ship to users, but pretty cool as an experimental way to edit whiteboards.
To continue this research, one should expand the Markdown file that describes the file format. This includes explaining all element types and providing more templates for page layouts. The templates I included proved to heavily affect its output. If it were to struggle with some hard rules (e.g. drawing outside the slide, adding comments in JSON or using incorrect property values), a validator could fix issues or provide feedback, for the LLM to revise its slides.
All of this has been generated by the older ChatGPT 3 model. The current ChatGPT 4-o model is likely even more capable of generating graphs and transforming prompts into slides. Maybe there are also models specialized to output JSON files.
Want to give it a try? Here is the Markdown file for LLMs.