Dione

Avoid the Greek Tragedy of Documentation: AI Tools integrated with Atlassian Confluence to lighten the load

Comment

Inspiration

While working with Atlassian tools in my job, I encountered the Achilles' heel of documenting code after completion or resolving a bug. This challenge motivated me to create Dione to simplify the process for myself and other developers.

What it does

Dione helps developers document code in real-time, so there is no need to jump between different screens or tabs. It also gathers your description of a diagram to create a transparent chart, so you don't have to spend hours on creating it yourself.

How I built it

I made a website using ExpressJS for handling user authorization and representing the project. The Visual Studio extension part (Dione Code), is in JavaScript. It talks to both the Confluence API and OpenAI API. It uses the selected text and requests ChatGPT to document it, and then returns back the response to the user. Then the user can edit it however she wants to finally push it to the server. In The Confluence macro part (Dione Diagrams), I used a React website to render and show the charts (and handsome Dione icon). These charts are made with OpenAI, by grabbing the content of the website and asking ChatGPT to return a MermaidJS syntax, to then dynamically display it in the previously mentioned React application.

Challenges I ran into

The real Pandora Box for me was showing the charts in Confluence, and it consumed most of the time and caused most of the headache. In current state, MermaidJS loses its handsome look the second time it's rendered (first time is the error message), which isn't great. Also, the charts can only be shown on one chosen page. There's a way to fix this, but alas, I didn't have enough time. The description is readable after a bit of squinting, though.

Accomplishments that I'm proud of

I'm super happy I could get the code and documentation right. I also found a way to make the charts work after trying many methods (initially, I wanted to insert just the HTML into the page's content, then I wanted to use an external website to send a request to generate a graph as a PNG and send it back, then I wanted to create an inner diagram studio... Long story short, lots of googling and browsing community.atlassian).

What I learnt

Over the couple of weeks, that felt like the Odyssey journey, I learnt how to use and NOT use forge, how to make and put out Visual Studio extensions, and many handy JavaScript tricks. I also had an insight into how Confluence works and learnt about the options that it offers, that I had no idea existed (and would have made my work easier).

What's next for Dione

Before I (hopefully) rest on laurels, I want to improve the charts, so they can be used on any page and let users pick their own styles. I also wanted to spend time working on the third extension, which would improve the code. New ideas pop in my mind every few hours, so maybe there will be even more tools in the future!

Extra

If you liked the last pictures of Dione, you may find more here.

Built With

Share this project:

Updates