Introduction

What is Desgram?

Desgram stands as a web application designed to streamline the creation of network diagrams with efficiency, all stemming from a concise text description or definition. In contrast to conventional diagramming software that necessitates manual manipulation of shapes, text, and connections, Desgram alleviates the arduous task of adapting diagrams. In the traditional setting, inserting elements between others, realigning, and other modifications often lead to tedious processes.

Notably, Desgram diverges by leveraging the inherently technical nature of network diagrams. It operates on a foundation of standard concepts like networks, nodes, and flows. The key innovation lies in its ability to interpret and translate technical descriptions into comprehensive visual representations. This process is facilitated through YAML, a structured data format akin to a configuration file. This unique approach not only enhances efficiency but also ensures precision and consistency in the generation of intricate network diagrams.

Here is a simple description of a network diagram:

networks:
    Frontend:
        nodes: Website
    Backend:
        nodes: [Backend, Cache, DB]
    Management network:
        nodes: [Bastion, Website, Backend, Cache, DB]

flows:
    API:
        from: Website
        to: Backend
    Redis:
        from: Backend
        to: Cache
    SQL:
        from: Backend
        to: DB
    SSH:
        from: Bastion
        to: [Website, Backend, Cache, DB]

And here is the result:

Upon examination of the generated diagram, it's notable that Desgram automatically adjusts the dimensions of shapes in accordance with the enclosed text. Additionally, it handles the positioning and alignment of these shapes. The creation of links to different networks is automated, and the routing of flows between elements is executed in an effective manner.

The Web App

The web application facilitating the generation of these diagrams can be accessed at desgram.io/app. With real-time generation capabilities, users can create and edit diagram descriptions, witnessing immediate updates to the generated diagram. The application offers the option to store these diagrams on browser local storage or external storage services like Google Drive, thereby enabling sharing with collaborators.