dedalusj / cloudgram

Generate diagrams for your cloud architecture using code

CloudGram

CloudGram lets you generate diagrams for your cloud architecture directly in your browser using code in a syntax similar to the DOT language and familiar to GraphViz users.

To start using CloudGram navigate to https://cloudgram.dedalusone.com and follow the examples and online editor to experiment visualizing your architecture.

Development

Pre-requisites

• Node 14+
• Yarn

Bootstrap

Upon cloning the project install the dependencies with yarn install. Beside install the project dependencies this will also install git hooks that will run tests and linting on every commit.

Running

Use the yarn run dev command to launch a dev server that will also watch for files changes and recompile if necessary. The app will be accessible at http://localhost:1234/.

Deployment

Use yarn run build to build the minified production assets and build.

The infra directory contains an example CloudFormation template to set up an S3 bucket, and a CloudFront distribution to serve CloudGram via CDN.

Regenerating service icons

The command yarn run assets can be used to automatically regenerate the SVG and JS files for the service icons for the supported providers. The command runs the scripts/assets,js node script. Currently, the script will always regenerate the icons for all providers hence no command line options are supported.

Regenerating grammar diagram

To regenerate the grammar diagram HTML, the src/grammar_diagram.html file, use the yarn run diagram command. This command is also run automatically at commit time via git hooks.

Related projects

CloudGram is inspired by the diagrams project.

cloudgram's Issues

Add GCP icons

Add icon set for Google Cloud Platform

Allow slashes in labels

Add share button to generate shareable link

Add generic icons

Add icons for basic components like Postgres, MySQL, Kafka, Redis, Cassandra etc to enable building diagrams outside of cloud environments.

Save and load from local storage

Allow the ability to load and save diagrams from the browser local storage.

Fix syntax highlighting of keywords in labels

The syntax highlighting in the editor incorrectly highlights keywords in labels, e.g.

Better favicon

The current favicon was put together quickly and it's fairly meh.

Consistent UI

Fix issue with grammar rendering

Place node/group label below the icon

Add the ability to place a node/group label below the icon

Document query param

Preserve position of dragged node

The graph is re-drawn from scratch on every change or on page load when pasting a link with a diagram in the query parameters.

This means that the position of nodes is recomputed from scratch and any change made by users by dragging node is lost.

Avoid edges to overlap nodes

The layout of the nodes by dagre does not prevent edges overlapping nodes see:

generated by:

diagram "image processing" [direction=lr] {
  generic.user user [label="User"];
  aws.appsync appsync [label="AWS AppSync"];
  aws.s3 bucket [label="AWS S3 Bucket"];
  aws.cognito cognito [label="AWS Cognito"];
  aws.lambdaFunction workflow [label="Start workflow"];
  generic.component resolver [label="Resolver"];
  
  group backend [label="Backend",style=solid,opacity=0,stroke=red,width=4] {
    aws.stepFunctions stepFunction [label="AWS Step Function"];
    
    aws.lambdaFunction extraction [label="Extract metadata"];
    aws.lambdaFunction detection [label="Object/Scena detection"];
    aws.lambdaFunction thumbnailing [label="Create thumbnail"];
    aws.lambdaFunction persistence [label="Persist metadata"];
    
    aws.dynamodb dynamo [label="AWS DynamoDB"];
    aws.rekognition rekognition [label="AWS Rekognition"];
    
    stepFunction -> extraction;
    stepFunction -> detection;
    stepFunction -> thumbnailing;
    stepFunction -> persistence;
    
    persistence -> dynamo;
    detection -> rekognition;
  }
  
  user -> cognito;
  user -> appsync;
  user -> bucket;
  bucket -> workflow;
  workflow -> appsync;
  appsync -> resolver;
  
  resolver -> stepFunction;
  resolver -> dynamo;
}

Add bidirectional and arrow-less edges

how to set the length of the link - default length between nodes seems too long

hello dedalusj - is there a way to set this?

Add svg export

A drawn diagram should be exportable to svg

Declaring generic cause parsing error

Adjusting font size

Add support for hex colours

Favicon

Add Firestore, GCP Cloud Run and GCP Data Catalog

iFrame rendering

Currently the rendering of the diagrams happens on the main page alongside the editor. Allow embedding CloudGram into an iFrame which would not load the editor and instead grab the document from query parameter and draw it.

This would allow easy embedding of CloudGram in other sites by simple URL.

Add k8s icons

Label on edges

Reduce bundle size

Currently the bundle size clocks at ~1.4MB. Explore methods to reduce it as much as possible.

Add browser icon

Add feedback button

Fix buttons in Safari

Fix the current look of buttons in Safari

Values "sw"/"se" of labelPosition seems to be inversed ?

Hi,

If I use : generic.users Users [labelPosition="sw"];

Then the label appears on the right and not on the left !

w is for west, no ? on the left, no ?

Greetings, JL.

Add Azure icons

Add many more examples

CloudGram ships with a very basic example. Create a new page with example richer architectures to showcase the features.

Crop white space when exporting

Make rendering available via HTTP request

Currently CloudGram rely bin the browser to run its code and layout the diagram however it would be nice to have the option to render in the backend so that diagrams could be rendered via an http request.

Autocompletion