ChatGPT and Markdown formats — Generating all Sorts of Editable Diagrams and Formats

This is a rapidly pulled-together blog post, mainly to share the results of getting ChatGPT to output Markdown. Markdown can be edited and via extension formats rendered as diagrams, charts and maps (e.g. mermaid.js, Kroki, ArgDown), providing a more visual way to share ChatGPT output.

Plain old Markdown with a twist

I thought I’d start with a simple Markdown. For this, I gave ChatGPT a brainstorming task to come up with pros and cons with the twist of using Markdown to indicate headings.

It worked but the markdown was rendered as HTML. I had to ask for a markdown version I could copy.

I then asked for key phrases to be highlighted in bold.

Taking this further I asked for external links to wikipedia.

My hope of getting academic paper references via links looked promising until I received valid markdown hyperlinks to made-up URLs! At least it alerted me to the fact that the links may not actually exist.

Overall I thought I would find this useful to at least highlight key phrases, link to relevant Wikipedia pages and paste into any Markdown editor.

Project Plan Gantt Charts (via Mermaid.js)

Mermaid.js is able to render simple Markdown to many diagram formats. In this example I get ChatGPT to come up with the mains tasks required to complete a project, give it an example of the Markdown to generate a Gantt chart and watch in amazement!

Next, I wanted the task sections to be dependent upon each other.

I changed the date format and start date. I was really impressed that ChatGPT knew what to change.

Finally, I needed to make no manual changes to the generated Markdown to get Mermaid.js to render the Gantt.

Argument Mapping (via ArgDown)

ArgDown is a more complex Markdown format for argument mapping. In this example, I did not give ChatGPT an example of the format. It seemed to know what ArgDown was but the syntax was not valid.

I pasted in a sample from the ArgDown website and was very impressed that it could convert the argument clauses to the new format.

ChatGPT did well at picking up most of the syntax based on the limited example and did not know that the braces were used for headings.

The syntax was valid and I was able to render the example in the ArgDown sandbox as well export to SVG and PNG formats.

At this point, I thought I had taught ChatGPT how to render in a small subset of ArgDown Markdown. Unfortunately, I was wrong.

I actually found it odd that ChatGPT reverted to using the + and - signs. Reinforcing the syntax got it to generate the example using the correct syntax.

I wanted different colors for the Pros and Cons so I taught it some additional markup.

Here is the rendered diagram which required no syntax tweaking.

Lots More to Try ….

Overall I’m very impressed. Impressed that ChatGPT can output generated text with markdown and that I could teach it new syntax. Some of my previous attempts to get graphical output resulted in ChatGPT saying that is a language model and can only output text. Structured syntax gets around this limitation and gives you back something that can be edited and then rendered into a visual chart, map or diagram. Mermaid.js, Kroki and ArgDown are certainly able to produce a diverse set of diagrams and have online editors/sandboxes that can render and convert to downloadable png or SVG files. Some other ideas include generating flow charts, user journey maps, block diagrams and mind maps (either via Mermaid.js or MarkMap).