dedalusj/cloudgram

Generate diagrams for your cloud architecture using code

cloudgram's Issues

Add feedback button

Add share button to generate shareable link

Add GCP icons

Add icon set for Google Cloud Platform

Reduce bundle size

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

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.

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.

Fix syntax highlighting of keywords in labels

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

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.

Label on edges

Document query param

Place node/group label below the icon

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

Favicon

Add support for hex colours

Save and load from local storage

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

Add k8s icons

Add many more examples

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

Allow slashes in labels

Better favicon

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

Add browser icon

Consistent UI

Autocompletion

Fix issue with grammar rendering

Add Firestore, GCP Cloud Run and GCP Data Catalog

Add svg export

A drawn diagram should be exportable to svg

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.

Declaring generic cause parsing error

Add generic icons

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

Adjusting font size

Crop white space when exporting

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;
}

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 bidirectional and arrow-less edges

Add Azure icons