cloudskew / cloudskew

Online Diagram, Flowchart Maker

CloudSkew

Create AWS, AZURE, GCP, Kubernetes architecture diagrams for free! Start here.

cloudskew's Issues

Need a stronger visual cue to indicate that a diagram is locked

Is your feature request related to a problem? Please describe.
If user tries to insert/load an icon onto a locked diagram, nothing happens. Many a times, the user doesn't even realize that the diagram is locked.

Describe the solution you'd like
Need a stronger visual cue to indicate that a diagram is locked

Describe alternatives you've considered
Some possible alternatives:

• pulsing/flashing lock symbol in the top horizontal menu.
• toast/pop up that warns user that they're trying to edit a locked document.
• grey out the diagram when locked?

Additional context
N/A

Tooltips are not shown after clicking on Home icon

Describe the bug
The tooltips are not shown after clicking on the Home icon

To Reproduce
Steps to reproduce the behavior:

1. Load cloudskew
2. Hover on buttons, see that the tooltips are shown
3. Click on the Home icon
4. Upon hover, tooltips are not shown

Expected behaviour
Tooltips are shown

screencapture:

Errors in browser console
No errors

Desktop (please complete the following information):

• Chrome Version 79.0.3945.117 (Official Build) (64-bit)
• OS: Windows 10

Additional details
Add any other details about the problem here.

When Safari browser is used to print diagrams (PNG/JPG etc), it has a black background

Describe the bug
When Safari browser is used to print diagrams (PNG/JPG etc), it has a black background.

To Reproduce
Steps to reproduce the behavior:

1. Print or export any diagram while using safari browser on MacOS.
2. The printed/exported diagram will unexpectedly have a black background.

Expected behavior

1. No black background in the diagram.

Screenshots
TBD

Errors in browser console
None

Desktop (please complete the following information):

• Browser: safari
• OS: MacOS

Additional details
Please see internal task #414 for more details.

'insert custom image' should be an item in the icon palette.

Is your feature request related to a problem? Please describe.
Except for custom images, all symbols are loaded from the icon palette. The custom images are however loaded from the diagram control menu (top horizontal menu). We need to make the experience more consistent/uniform.

Describe the solution you'd like
The 'insert custom image' menu item should converted into an icon palette item.

Describe alternatives you've considered
N/A

Additional context
N/A

when search term has been entered, search box should maintain blue outline (visual cue)

Describe the bug
There should be some strong visual cue (say a blue outline) whenever the icon search box has text in it.

To Reproduce
Steps to reproduce the behavior:

1. Enter 'virtual machine' in the icon palette's search box.
2. As you begin typing in the search box, a blue outline appears around it.
3. The palette filters the view to just icons matching the search term.
4. Now click somewhere else on the diagram.
5. The search box loses the blue outline (even though the search text in it exists and the view is palette filtered).

Expected behavior
When there is some text in the search box, it should maintain the blue outline even if it loses input focus.

Screenshots

Errors in browser console
N/A

Desktop (please complete the following information):
N/A

Additional details
N/A

GCP, CNCF iconpacks

What icon (or icon set) would you like to be included in cloudskew?

• GCP icons
• CNCF icons

Which area/domain would these icons fall under?
Cloud Provider (?)
CNCF Ecosystem

Where can these icons be downloaded from? (note: only .svg format is supported at the moment)
GCP: https://cloud.google.com/icons/
CNCF: https://github.com/cncf/artwork

Additional details

when any palette is opened, the search box should get keyboard input focus

Is your feature request related to a problem? Please describe.
Really minor issue. Whenever user opens any palette (say, icon palette), the search box should get input focus.

Describe the solution you'd like
See above.

Describe alternatives you've considered
N/A

Additional context
N/A

need icons from various cloud computing projects

What icon (or icon set) would you like to be included in cloudskew?

• MongoDB
• HAProxy
• Elastic
• Heroku
• Netlify
• DigitalOcean
• Hashicorp
• DataDog
• Sumologic

Which area/domain would these icons fall under?
Various. Need to re-categorize.

Where can these icons be downloaded from? (note: only .svg format is supported at the moment)
TBD.

Additional details
N/A.

Icon Power BI

required power bi icon

need VS, VSCode icons

What icon (or icon set) would you like to be included in cloudskew?
VS, VSCode

Which area/domain would these icons fall under?
Developer tools

Where can these icons be downloaded from?
Not Sure

Additional details
N/A

text labels 'shrink' on page reload

Describe the bug
All the text labels 'shrink' when page is refreshed/reloaded. See attached screenshots.

To Reproduce
Steps to reproduce the behavior:

1. Create a long text label for any icon.
2. Format the shape of the text label (see screenshot)
3. Reload/refresh the page
4. While the text label retains the 'styling', it does get squished (see screenshot).

Expected behavior
The text label should remain unaltered.

Screenshots
Before page refresh:

After page refresh:

Errors in browser console
N/A

Desktop (please complete the following information):
N/A

Additional details
Internal bug 496 has all the relevant details.

Temporary Workaround
Select the 'squished' text label and press any up/down/left/right arrow key. The label shape will revert back to the original shape prior to refresh. However this has to be done on each page refresh which is tedious and not ideal.

need icons from CNCF projects

What icon (or icon set) would you like to be included in cloudskew?
Icons for CNCF projects (kubernetes, prometheus, containerd, fluentd, envoy etc).

Which area/domain would these icons fall under?
CNCF: https://www.cncf.io/projects/

Where can these icons be downloaded from?
https://github.com/cncf/artwork

Additional details
N/A

Azure Monitor Icon is all black

Describe the bug
Azure Monitor icon is not showing properly, it's all black

To Reproduce
Steps to reproduce the behavior:
Grab Azure Monitor Icon

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If possible, add screenshots and/or screen recordings which capture the issue. These greatly help investigations.

Errors in browser console
If you observe any errors in the browser console, please paste those here.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari, firefox]
• OS: [e.g. windows10, macOS]

Additional details
Add any other details about the problem here.

Unlimited Canvas

Canvas should be unlimited in multiple directions. Similar to Microsoft Whiteboard app but for symbols. Can be used for quick diagramming with customers.

[won't fix] auto-zoom the diagram to fit page/viewport dimensions

Is your feature request related to a problem? Please describe.
On monitors with very high resolutions, the diagram looks very small. Have to zoom-in a couple of times to make the diagram fit the page.

Describe the solution you'd like
on page load, the diagram should auto-zoom to fit the page.

Describe alternatives you've considered
TBD.

Additional context
N/A.

import an ARM template

Is your feature request related to a problem? Please describe.
We use to deploy our Azure infrastructures as ARM templates. It would be interesting to be able to import an ARM template (json file) and see the diagram displayed on the canvas surface.

Describe the solution you'd like
As described above

Describe alternatives you've considered
None.

Additional context
None.

Various UI issues

Describe the bug
Please check attached PDF

To Reproduce
Cloudskew feedback.pdf

need icons for various operating systems

What icon (or icon set) would you like to be included in cloudskew?
icons for windows, linux, mac, android etc

Which area/domain would these icons fall under?
operating systems

Where can these icons be downloaded from? (note: only .svg format is supported at the moment)
Not sure

Additional details
N/A

Canvas not expanding to leverage the full monitor resolution

Canvas not expanding to leverage the full monitor resolution
Please see the screenshot. I have dual monitors. Not sure why the canvas is getting restricted to a certain resolution on the 23 inch monitor

Pen support

Support drawing diagrams with stylus and selection of objects with a stylus

Improved connectors: curved corners + jumps

I prefer to have curved corners on my elbow connectors. Not only does it look better (IMO) but it also shows the direction of flow when connectors join/overlap each other to reach the same destination icon.

Some 'container' entities can alternatively be represented as boxes

What icon (or icon set) would you like to be included in cloudskew?
Line and dashed line rectangle shape, as an alternative to block colours. This can be used for VNETS, subnets etc

Which area/domain would these icons fall under?
Shapes

Where can these icons be downloaded from? (note: only .svg format is supported at the moment)
not sure

Additional details

Add Export with more quality. When using the .png we can see the pixels on the image.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

import a previously exported diagram

Is your feature request related to a problem? Please describe.
Following on request #48, I would like to load a diagram from a json file. This would allow to have a base template for other diagrams.

Describe the solution you'd like
I would like to be able to load the json of the previously exported template and see the diagram being displayed on the canvas surface.

Describe alternatives you've considered
None.

Additional context
None.

Add `about` and `privacy policy` pages

Describe the bug
The about, terms of use and privacy policy pages need to be added.

Additional details
More details in issue #38.

Printing/Exporting a zoomed-in diagram only causes partial diagram to print/export.

Describe the bug
Printing a zoomed-in diagram clips the printed/exported diagram's dimensions.

To Reproduce
Steps to reproduce the behavior:

1. Press 'zoom in' control on diagram a couple of times.
2. Click on the 'export' button, select PNG
3. Wait for PNG file to be downloaded.
4. The diagram in the PNG file will have it's region clipped.

Expected behavior
The full diagram should be exported/printed.

Additional details
The internal task 498 has additional details.

Workaround
Reset the zoom level and then print the diagram.

Export to Visio

Ability to export to Visio format so the diagram can be extended and/or handed to a customer to extend

Snapping to grid is not smooth.

Describe the bug
While snapping symbols to grid, the following two issues have been observed:

1. non-alignment with minor grid-lines (which are spaced at 20px interval). Here are the symbol dimension changes observed at various zoom levels:

zoom%	horizontal and vertical drag	diagonal drag
100%	20px	?
120%	24px (120/100 * 20px)	?
144%	28.8px (144/100 * 20px)	?

At zoom levels > 100%, it is not possible to snap to minor grid-lines.

2. Granularity of dimension change is 20px minimum (see above). If you need to increase height/width by (say) 15px or 12px etc, then you're out of luck.

Expected behavior

1. Alignment with minor grid-lines at all zoom levels.
2. Can change dimension with at least 5px granularity.

Screenshots
N/A

Errors in browser console
N/A

Additional details
N/A

Freeze the search bar on scroll

Is your feature request related to a problem? Please describe.
When you scroll down the icons list if you want to search you have to scroll back to the top to get the search bar.

Describe the solution you'd like
Would be great if the search bar remained frozen and usable as you scroll.

Describe alternatives you've considered

Additional context

export diagram as deployment script (ARM, CloudFormation, Terraform, Pulumi, PS/Bash etc)

Is your feature request related to a problem? Please describe.
We use to deploy our Azure infrastructures as ARM templates. It would be great to be able to export a diagram as an ARM template to be able to deploy it.

Describe the solution you'd like
As mentioned above.

Describe alternatives you've considered
None.

Additional context
None.

need icons from various apache projects

What icon (or icon set) would you like to be included in cloudskew?
flume, spark etc

Which area/domain would these icons fall under?
various apache projects

Where can these icons be downloaded from? (note: only .svg format is supported at the moment)
Not sure at the moment.

Additional details
TBD

[won't fix] need to show 'loading' indicator immediately when user creates a new diagram

Describe the bug
When a user creates a new diagram, there is a delay in showing the loading indicator. Often times, this leads to users trying the same action again (until they finally see the loading indicator).

To Reproduce
Steps to reproduce the behavior:

1. Go to cloudskew.com
2. Click on 'new diagram' in the left-side activity bar.
3. Click on any diagram template.
4. Click on 'Create' in the confirmation dialog.
5. It takes a couple of seconds before the 'loading' indicator kicks in.

Expected behavior
The loading indicator should be displayed as soon as user clicks on the 'create' button in the confirmation dialog.

Screenshots
N/A

Errors in browser console
N/A

Desktop (please complete the following information):
N/A

Additional details
N/A

change the default coordinates at which symbols are loaded on the canvas

Is your feature request related to a problem? Please describe.
When I select a symbol (from the icon palette), they're always loaded at (50,50) on the canvas. This is problematic if I already have an existing symbol there.

Describe the solution you'd like
Some alternatives that need to be evaluated:

1. Have a staging area (margin?) where symbols get loaded
2. Load the symbol at position of last mouse click
3. Allow user to drag the symbol instead to their desired position on canvas

Describe alternatives you've considered
See above.

Additional context

Do not force login to use app

Is your feature request related to a problem? Please describe.
Forced login through social provider before playing with the app at all.

Describe the solution you'd like
Make people log in when saving a diagram or at a point after some usage.

Describe alternatives you've considered
We use draw.io that has Azure icons - requires no sign-up or log in.

Additional context
There's no about page and zero details on who's hosting this etc, so up-front requirement of social account details does NOT build trust.

Possibility to import Azure reference architecture

Starting a diagram from scratch is a time-consuming job. it would be good to start with a reference architecture and then adjust to taste and requirement.

The 'visual properties' window should be easily discoverable

Is your feature request related to a problem? Please describe.
The 'visual properties' window is a bit hard to discover:

• user has to right click either on a canvas symbol or on the canvas itself and select 'visual properties'. Right click is non- intuitive on a web app.
• user has to find and click the 'visual properties' icon from the diagram control menu (top horizontal menu).
• user has to press F4 key.

Describe the solution you'd like
See below.

Describe alternatives you've considered
Some alternatives to easily discover the 'visual properties' window.

• Ensure it's permanently docked (i.e cannot be dismissed or closed).
• Always open it whenever a symbol is loaded.
• Always open it whenever a symbol is selected.

Additional context
N/A

Cloud Adoption Framework Templates

Templates to support the Azure Architecture Center basic models:

• Hub and spoke network architecture
• Mesh network architecture
• Standard subscription model
• NIST standard architecture foundation
• Basic landing zone

need icons from Microsoft Office and PowerBI

What icon (or icon set) would you like to be included in cloudskew?
Icons for Microsoft Office and PowerBI:

• Outlook
• OneDrive
• Word
• Excel
• PowerPoint
• OneNote
• Skype
• Teams
• PowerBI

Which area/domain would these icons fall under?
Office productivity tools

Where can these icons be downloaded from?
Not sure

Additional details
NA

Connectors in the horizontal toolbar

Having to find connectors in the icon menu is laborious, I would much rather be able to add them from the horizontal toolbar

Expandable canvas

The canvas size is currently fixed, can it be made to automatically expand?

IMO the best way is to allow it to continually grow when drag and dropping an icon of the edge of the canvas. It stops growing when the icon is dropped

Another way is to grow it a fixed amount when an icon is dropped on the edge.

need to highlight the 'active' icon in the activity bar.

Describe the bug
The 'active' icon in the activity bar is not highlighted.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'cloudskew.com'
2. Click on the '+' icon (new diagram) in the activity bar (vertical bar, left-side)
3. Note that the '+' icon is now active, but not highlighted.

Expected behavior
The '+' icon should be highlighted.

Screenshots

Errors in browser console
If you observe any errors in the browser console, please paste those here.

Desktop (please complete the following information):
N/A

Additional details
N/A

need generic icons which match the terms 'computer', 'laptop', 'server', 'pc' etc.

What icon (or icon set) would you like to be included in cloudskew?
need generic icons which match the terms 'computer', 'laptop', 'server', 'pc' etc.

Which area/domain would these icons fall under?
general

Where can these icons be downloaded from? (note: only .svg format is supported at the moment)
TBD

Additional details
N/A

Make connectors/arrows easy to find.

It's laborious to have to separately add connectors. I would like to be able to do it from an icon, either from its context menu or by selecting it and a symbol appearing near it which when clicked adds a connector to it already attached at the non-arrow end.

Drag and drop icons

Having to the text of the icon in the left bar to add it to the page feels a bit clumsy, clicking the icon itself should also work..

Drag and drop would be even better.

Unable to export & print

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If possible, add screenshots and/or screen recordings which capture the issue. These greatly help investigations.

Errors in browser console
If you observe any errors in the browser console, please paste those here.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari, firefox]
• OS: [e.g. windows10, macOS]

Additional details
Add any other details about the problem here.

need new icons for programming languages and frameworks

What icon (or icon set) would you like to be included in cloudskew?

• Various programming languages: C#, typescript, python, java, golang etc
• Various frameworks: .net, angular, node, reactjs, django etc
• Various associated package managers: nuget, npm, pip etc

Which area/domain would these icons fall under?
programming languages, frameworks

Where can these icons be downloaded from? (note: only .svg format is supported at the moment)
Not sure

Additional details
N/A

Need ability to resize/expand/zoom diagram.

Is your feature request related to a problem? Please describe.
Currently all CloudSkew users get a stock 900px x 500px diagram. For users with higher screen resolutions or 4K monitors, the screen real-estate is underutilized. And currently, there is no way to increase the diagram canvas size.

Describe the solution you'd like
We need one of the following abilities:

1. Ability to resize a diagram area by dragging at the canvas borders.
2. Ability to choose from one of several diagram sizes (e.g. dropdown menu during diagram creation).
3. Ability to zoom in/out of a diagram (via mouse scroll, keyboard shortcut or a slider control).

Option 3 is the one I'm leaning towards. The other two will impact the diagram print/export experience.

Allow creating nested diagrams

Sometimes diagrams become so big that it gets difficult to understand the high-level context.
Nested diagrams can have click-able regions that expand and become detailed or open another diagram if clicked. check c4model fo reference.

Power BI Icon/logo would be great

What icon (or icon set) would you like to be included in cloudskew?
I'd like the Power BI icon set (word, powerpoint, excel etc) to be included.

Which area/domain would these icons fall under?
reporting

Where can these icons be downloaded from? (note: only .svg format is supported at the moment)
Would be great if you could point us to a download link for these icons.

Additional details
Add any other details about the feature request here.

export the diagram as a json template file

Is your feature request related to a problem? Please describe.
having this ability would allow me to create a base template and then start every other diagramming project from it.

Describe the solution you'd like
export the current diagram as a json file would allow me to import it later as a base template for another diagram.

Describe alternatives you've considered
None.

Additional context
None.