7 ms·
Inkscape Cloud Architect
- mipselaer 3y agoMake Inkscape a professional Cloud Visualization Studio for Cloud Architects.
- threatripper 3y agoI could make that in general but I could not do it efficiently today. Is there a video showing exactly how to make this kind of diagram in Inkscape?
- mipselaer 3y agoWill create this video, maybe today.
- vbernat 3y agoAs the README mentions "cloud-based" platforms, it should be noted that Diagrams.net (previously Draw.io) is available as an offline application. Inkscape is missing connection points and routing controls to make it easy to do diagrams. Also, Diagrams.net can export to SVG or PNG while keeping the original diagram embedded. I use that instead of the specific format they use.
- Already__Taken 3y agoI tried to get diagrams to pass through the container ID to the exported SVG "g" to find it's some massive java thing that hasn't been added to in years. There's a lot of scope for semantic SVG we could use in other tools.
- mipselaer 3y agoInkscape has connection points, but they are not working perfect currently. This should be addressed in the future. Imo Inkscape is far more powerful then draw.io. it's also faster.
- esafak 3y agoIf you have to annotate each box you might as well ditch the image. In which case you can describe what it does instead of just naming the service it uses. And use Mermaid markup for the diagrams; GitHub supports it!
- mipselaer 3y agoI like Mermaid for small details but for big system drawings I prefer a mature design studio.
- jimmcslim 3y agoI would suggest that if your architecture diagrams are a bunch of icons provided by AWS/Azure/GCP with lines pointing at each other... you are doing it wrong. The 'what does this element do for my system' is vastly more important than the 'which in vogue offering from my cloud provider implements it'. I highly suggest folks take a look at the C4 Model: https://c4model.com/ https://c4model.com/
- grogenaut 3y agoNone of the visuals in the examples are distinct. Usually I have like chrome to a box labeled alb... I'm not sure what c4 is getting me over that
- mipselaer 3y agoGreat article. So you could say the current version is just a bunch of icons. Next step is adding meta info to the recourses. I'm currently working on a auto import funcion like you can use in Cloudcraft.
- ahoka 3y agoWhat a useless crap. It’s an over engineered documentation framework focusing on all the wrong things so some agile consultant can sell more cool aid. I don’t trust anything that is designed someone who last did real projects in the 2000’s OOP Java enterprise craze.
- mkl95 3y agoIt's not a hard science. Take the parts that work for your team and scrap the ones that don't.
- politelemon 3y agoThis is the important bit. C4 in its entirety isn't useful to many orgs and teams, and can be unnecessary overkill. You might end up picking 1 or 2 layers for yourself. You don't have to stick to their software either, use DrawIO if that's what you prefer, but understand the main concepts that C4 is trying to impart about the separation, what goes on the arrows, and how useless icons can be.
- teddyh 3y agoWhy use Inkscape for this, when Dia¹ is a more dedicated diagram editor? 1. <https://wiki.gnome.org/Apps/Dia/Screenshots https://wiki.gnome.org/Apps/Dia/Screenshots>
- hn92726819 3y agoLast release was 2014. I remember liking dia, but I forget...it either crashed or didnt have all the aws icons I wanted when I used it last 5 years ago, and there hasn't been a release since.
- lloydatkinson 3y agoYou might be interested in why this person didn’t want to use Dia: https://fasterthanli.me/articles/just-paying-figma-15-dollars https://fasterthanli.me/articles/just-paying-figma-15-dollar... Recently discussed on HN
- teddyh 3y agoThat person’s entire criticism of Dia is “it’s old”. That’s it; not even “the program, when I run it, looks old”! They merely criticize the web page for having old screenshots and support for old operating systems on it.
- lloydatkinson 3y agoIt’s last update was ten years or more ago, doesn’t support HiDPI screens, shall I go on?
- teddyh 3y agoFeel free; the link you provided certainly did not have anything concrete.
- smallerfish 3y agoYour preview image has a transparent background, and isn't readable when github renders in dark mode.
- geokon 3y agoI found a "hack" for diagrams that need to work with both white and black backgrounds was to make all your lines gray. And then when you want vary the intensity of the line you adjust the opacity It cuts your effective dynamic range in half, but works pretty well. And adjusting opacity is actually somewhat easier than adjusting color hex values I haven't tried it with colors though - but I expect it'd work as well In contrast, forcing a white background on people running dark mode is kinda ugly in my opinion as you end up with a border/cutout and it doesn't flow with the rest of the content as well
- diggan 3y ago> forcing a white background on people running dark mode is kinda ugly in my opinion as you end up with a border/cutout But even if it's ugly (https://imgur.com/a/bsLu54F https://imgur.com/a/bsLu54F), I prefer that than the alternative (https://imgur.com/a/ccuJq36 https://imgur.com/a/ccuJq36)
- gsliepen 3y agoI am surprised they used a PNG for the preview instead of an SVG file. I know you can embed JavaScript in SVG files, I wonder if it could react to the `prefers-color-scheme` CSS feature of the page it's embedded in.
- ygra 3y agoAs someone working indirectly on one of those “crap online editors”, I do wonder what benefits Inkscape has over other options for what is essentially a graph that may very well need an automatic layout. Someone else mentioned diagrams.net as well.
- otteromkram 3y agoI would 100% recommend drawio (diagrams.net). It has diagram standards + icon sets for top cloud/compute platforms. Plus, if you use VSCode, there's a solid extension you can use to create and include the diagrams in your project.
- quickthrower2 3y agoNone. It is slower (because … not sure) and more complex (because it is designed for art/graphic design).
- antifa 3y agoI needed a dbdiagram tool recently. I found some, but they had had at least one of 2 flaws: Could not programaticly import/update schema without tons of additional mousing around. Auto rearrange could not handle large schema.
- xg15 3y agoFor a moment I had thought they launched a specialized toolset for drawing clouds. I'm slightly disappointed.
- pritambarhate 3y agoI use draw.io for these kind of diagrams. It has symbols for most of the cloud services built in. It also maintains the arrow connections when we move around the elements. Very handy!
- petepete 3y agoI use Excalidraw because I like the hand-drawn look when planning/sketching things out. If/when I make the jump to actual documentation I use Mermaid so I can keep everything tidy under source control.
- rapnie 3y agoIn Mermaid, while I like it a lot, you lose control of layout positioning. Does the auto-layout position large diagrams (many shapes + connectors) appropriately? The Excalidraw export format is JSON, so you might use that in source control just as well. Or include the format in PNG or SVG export (which draw.io supports also).
- lvncelot 3y ago+1 for Excalidraw, especially regarding the "multiplayer" aspect. In general, if sketching it out, whether alone or with multiple people, using something simple I can click, drag & label is more than enough and helps me keep the flow. (I would stick to actually drawing - either on a whiteboard or something digital - but my handwriting is absolutely atrocious) As soon as I'm done sketching and move over to actually documenting a concrete solution, something code-based like Mermaid - as you said - is much nicer. But both are entirely different processes for me.
- quickthrower2 3y agoExcalidraw is very nice in it’s simplicity. A rectangle can do a lot there: a textbox, a window, a mobile phone.
- jahlove 3y agodraw.io (now called diagrams.net) has a sketch style that mimics xkcd / Excalidraw. You can try it here: https://app.diagrams.net/ https://app.diagrams.net/
- rapnie 3y agoMost diagramming solutions are like freehand drawing tools. Besides text-based diagrammers (Mermaid, PlantUML, D2Lang) what are good diagramming components for integration in a web front-end that help with strict, validated diagramming? Restricted tool pallet shapes and commands. I.e. defining that a "Concept Map" only has Concepts and Relationships, where the latter must be connecting 2 concepts for the diagram to be valid. Or an "Event Storming" diagram that only has the appropriate sticky note types that must be layed out appropriately on a timeline. Bonus points for supporting collaborative editing. React Flow [0] until now is the component that's closest to this. Others, Excalidraw [1] and Tldraw [2] may be integrated to support this, with some additional effort. [0] https://reactflow.dev https://reactflow.dev [1] https://excalidraw.com https://excalidraw.com [2] https://tldraw.com https://tldraw.com
- navaati 3y agoCheck this: https://penrose.cs.cmu.edu/ https://penrose.cs.cmu.edu/
- wiseowise 3y ago“Online crap editors”(Diagrams, excalidraw) run circles around slow “native” Inkscape.
- steve1977 3y agoWhat I generally dislike about using graphics tools for diagrams is that they have no notion about the semantics of what is getting drawn. It’s just „pictures“. In contrast to, for example, proper modeling tools like Sparx Enterprise Architect or Visual Paradigm. It doesn’t really matter then if you’re using an online tool or a native one.
- kevin_thibedeau 3y agoVisio can understand more than just pictures.
- momirlan 3y agoi use yEd from yWorks for all my diagramming. it is based on GraphML, can import nodes/vertices from excel/XML, it has good automatic layouts for large diagrams, and can output to GraphML, SVG, JPG, and many other formats.
- wejick 3y agoyEd and GraphML is very versatile indeed. Years ago I worked on a quite big mobile game project, we used graphML to be the main quest / level / story format of the game and naturally yEd was the editor of choice. Pretty scrappy but it worked, somehow.
- deleted 3y ago[deleted]
- Veuxdo 3y agoDrag-and-drop diagramming tools have their place, but they're a pretty bad choice for system architecture diagramming. I wrote on this last year: https://www.ilograph.com/blog/posts/its-time-to-drop-drag-and-drop-diagram-tools/ https://www.ilograph.com/blog/posts/its-time-to-drop-drag-an...
- davidy123 3y agoI don't understand why more people don't care about round-tripping. Yes it was over ambitious and far too heavyweight in the 90s, but today you should be able to generate OpenAPI and its data and component equivalents from the visual graph, or inversely import your graph, then verify / update either "side" at any time. I've mentioned this before, but TogetherJ was the best example I saw, lightweight and worked well for visual/code round tripping when it was all in a predictable Java environment. Somehow we went from overdone to decades of "works for me" mucky muck.
- pragmatic 3y agohttps://d2lang.com/ https://d2lang.com/ This lets you produce diagrams with code.
- minhmeoke 3y agoVery cool, thank you! Creating diagrams using code rather than using drag-and-drop tools might be a good idea for more complex architectures as described here: https://www.ilograph.com/blog/posts/its-time-to-drop-drag-and-drop-diagram-tools/ https://www.ilograph.com/blog/posts/its-time-to-drop-drag-an... - Can check the textual description of the diagram into version control and track how it changes over time - Can easily diff 2 versions of the same diagram - Adding elements to a large existing diagram using WYSIWYG tools can be tricky (eg: you may have to move or reroute existing elements to make enough space) Another cool idea is to create multiperspective diagrams with different views for different purposes (eg: code structure, deployment, network architecture, security): - Clarity. By breaking up diagrams into perspectives, diagram authors can bring much more clarity to a system. Individual concerns can be spread out over many perspectives, allowing each the space it needs without interfering with others. - Extensibility. Multiperspective diagrams share a model, so creating additional perspectives from an existing diagram is incredibly easy, far easier than starting from scratch each time. - Maintainability. A corollary to the above, individual perspectives can be modified without affecting the others. Diagrams that are easy to maintain get maintained, while diagrams that aren’t fall out of date quickly. Multiperspective diagrams greatly help in the fight to keep documentation up-to-date. This is a cool demo: https://app.ilograph.com/demo.ilograph.Stack%2520Overflow%2520Architecture%2520(2016)/Traffic https://app.ilograph.com/demo.ilograph.Stack%2520Overflow%25... For other textual diagramming tools and ideas, please see this thread: https://news.ycombinator.com/item?id=37222855 https://news.ycombinator.com/item?id=37222855 Disclaimer: I'm not affiliated with Ilograph, just stumbled onto their blog and I think they have a lot of cool ideas.
- T-Winsnes 3y agoWe’ve taken a different approach with hava.io, why draw yourself when you can automatically draw what’s in your cloud environment.
- frankcostanza 3y agoI build a lot of diagrams for external audiences and I've found both Excalidraw and LucidChart to be really useful. I use Excalidraw for live diagramming and use LucidChart for our external docs or more formal presentations.