DiaDoc

AI-assisted code documentation tool for the file structures of in-progress and existing software projects.

Comment 2

Inspiration

A couple of months ago, Lani was installing Magma, an open-source mobile core network solution, to her computer via its quick start documentation. It took her nearly 2 weeks to install it because it mostly contained command lines and she found herself so confused about the file structure of the project. Leah and Lani have faced similar issues when referring to documentation to install software, notably when installing the Flutter framework for app development and when encountering environment variables for the first time. It made them wonder if there could be a tool to aid in understanding a project’s file structure either step-by-step in documentation or given a project’s GitHub repository.

What it does

DiaDoc is a tool meant to help documentation writers come up with diagrams for their project’s file structure and to help hackers understand the file structure of existing software projects. Users can manually make file diagrams with a drag and drop interface, generate a file diagram given a public existing GitHub repository link, a link to a webpage containing project documentation or given the text draft of documentation for a software project, and receive the resulting file diagram in ASCII art. Users who want to go back to their file structures later on can download a .diadoc file of their file structure draft which can be opened by DiaDoc in the Manual Builder for future edits.

How we built it

DiaDoc was built in HTML, CSS and JavaScript with the React framework and uses the Gemini API for file structure generation in its “From Link” and “Documentation Text” options. It has two repositories, one that is public, attached to this submission, and contains source code that can run the web application locally, and the other is a private repository cloned off of the public one by Vercel that holds .env files and a vercel.json file for web app hosting. It uses REST API requests to converse with the Gemini API and makes heavy use of the lucide-react, axios, and react-dom libraries and packages for clean icons, HTTP client, and document object model functions for React.

Challenges we ran into

Building the app was one thing, hosting the app was a whole other issue. In the past both of us have only ever hosted static websites, and with tools like GitHub Pages and surge.sh, there was hardly ever an issue getting our projects up. With an existing web application, Vercel creates a clone of its repository (but private) to hold additional information needed to host it publicly. While this is a great security practice, it inadvertently caused problems. Two notable errors include one where Gemini would work fine locally but output a single error supposedly caused by the server while hosted. It turned out that we only had the API key locally so adding it to Vercel’s settings fixed it. The other error came from a library (axios) that Leah was confident we had in our project but our production version did not seem to think so. The error ended up being that we had it installed globally in our local so our production repository did not have it installed so installing it within the project itself fixed it instantly.

Accomplishments that we're proud of

Making a custom file extension! Originally, we thought that file extensions had to have a direct correlation to how they were being used, but it turns out most files boil down to txt files or c files functionally and that file extensions can be thought of an addition to a file’s name. It was also satisfying to finally work with React and Vercel, as we have developed apps before in nearly any other framework or tool (Dart/Flutter, pure HTML/CSS/JS, Python/Flask, Java/Android etc.) but never what was mostly recommended to us: React. Finally getting to use it made us realize why it was recommended to us in the first place.

What we learned

  1. Learned how to make a custom file extension and what file extensions really are
  2. Explored ways on how to incorporate the Gemini API into a web application
  3. Figured out how to create a drag-and-drop user interface for diagramming
  4. How to create and send a file to one’s Downloads folder

What's next for DiaDoc

The file structure generation output is pretty inaccurate (for example, by giving DiaDoc a link to its own public repository, it will generate a file structure output a lot closer to more popular repositories from an organization also called DiaDoc) so figuring out ways on how to fine-tune the API for ASCII diagramming specific purposes would be our next main goal. We also came across a thread on Reddit where people shared similar thoughts on wanting a tool like this: https://www.reddit.com/r/datacurator/comments/1dzqtlp/what_tool_to_visualise_folder_structure/ and people have mentioned desiring features like being able to add metadata in addition to files and folder, the ability to add short descriptions for folder contents, and the ability to build templates for new projects (the latter which might mean building out the .diadoc files to be better fit for template format).

Built With

Share this project:

Updates