Had another look at how I could export an Obsidian kanban board as an actual kanban board today. I thought I’d through ChatGTP at the problem, and see whether it could produce a Go program that took the markdown representation of a kanban board and reproduce it as a HTML file.

Here was the prompt I used:

Please write a Go program which will take a Markdown version of an Obsidian kanban note, parse it, and convert it into a HTML page.The markdown representation of a kanban note is as follows:

  • A H2 header represents a column, with the H2 text value representing the column name.
  • Between each successive H2 header are the cards for that column. Each one begins as a TODO item. The card contents is indented and can be any arbitrary Markdown.

The generated HTML must have the following traits:

  • Each column must be wrapped within a div.
  • Each card within that column must be wrapped with a separate div.
  • The body of each card must be rendered from Markdown as HTML.

The tool must take the Markdown as standard in, and write the HTML to standard out.

ChatGPT came up with something, and after checking it for obvious errors, I prepared a test board and gave it a run. Here’s the test board I used:

Auto-generated description: A digital kanban board is displayed with columns labeled To Do, Blocked, In Progress, and Finished, containing task cards with various statuses and notes.

Here’s how it was rendered in HTML:

Auto-generated description: A project management board displays four categories: To Do, Blocked, In Progress, and Finished, with tasks listed under each.

A good first attempt, and I was impressed at how it actually styled the page to actually display the columns as columns1. I was not expecting that. There were a few things that were missing, such as rendering card bodies. In fact, a keen observer may note that some of the TODOs that appear in the In Progress column actually come from the card body itself.

I requested these changes from ChatGPT and it had another go. And this is where it ran into trouble:

Auto-generated description: A digital Kanban board displays various columns labeled To Do, Blocked, In Progress, and Finished, with tasks listed under each.

One issue was that the generated code decided to scan the input line-by-line, and maintain state as to whether it’s parsing a column heading, card title, or a card body. But it was not properly resetting this state when encountering the next column header (note how “#blocked Will not do” appears below the In Progress heading when it should be in the card above it). This also explains why the columns no longer showed up — there were divs that weren’t being closed.

So it was time for me to take over. I fixed a few bugs and added handling of the card body indentation. The end results looks like this:

Auto-generated description: A kanban board showcases tasks in columns labeled To Do, Blocked, In Progress, and Finished, with notes detailing various activities.

Good enough for what I need.

All in all, it was an interesting experiment getting ChatGPT to start this off, and I’m impressed on how much it managed to do from the jump. But I’d be hesitant to say that what it produced is high quality, maintainable code. It was a little difficult to change, and it’s certainly wouldn’t be the way I’d choose to do it. If this was anything more than something for my own use, I probably would’ve junked it and started from scratch2. But hey, it works. And for what I need, it’s better than not existing at all.

If anyone’s interested in seeing the code, you can check it out here.

  1. I didn’t change anything from the program apart from modifying the regex selecting task TODOs to support completed task. ↩︎

  2. That said, if I were to actually make a project out of this, I’d already got a name for it: Kanbana Boy. 🏝️ ↩︎