hatemhosny

hatemhosny / diagrams-js

Public

Draw cloud system architecture diagrams as code in TypeScript

diagrams-js.hatemhosny.dev
10
0
100% credibility
Found Apr 11, 2026 at 10 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

diagrams-js lets you create cloud architecture diagrams by writing simple code with official icons from 17+ providers including AWS, Azure, and GCP.

How It Works

1
🔍 Discover diagrams-js

You hear about a simple way to draw cloud diagrams just by describing them in plain words, like sketching your app's pieces.

2
🎮 Try the playground

Jump into the online playground and see your first diagram appear instantly as you type.

3
☁️ Pick your cloud pieces

Choose icons for services like databases or web servers from AWS, Azure, or others – everything looks just like the real cloud logos.

4
🔗 Connect it all

Link your pieces together with arrows showing how data flows, and watch the layout adjust automatically.

5
✨ See your diagram shine

Hit render to get a beautiful, professional image in SVG, PNG, or more, ready to share.

🎉 Share your architecture

Your cloud setup is now visualized perfectly for teams, docs, or presentations – no drawing skills needed!

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 10 to 10 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is diagrams-js?

diagrams-js lets you draw cloud architecture diagrams as code in TypeScript or JavaScript, turning simple node and edge declarations into polished visuals of AWS, Azure, GCP, and 16 other providers. It solves the pain of manual diagramming tools by generating SVG, PNG, JPG, or DOT output via Graphviz, all running client-side in browsers, Node.js, Deno, or Bun. Import diagrams from JSON or export them for easy sharing and repro.

Why is it gaining traction?

Unlike drag-and-drop tools or static image generators, it offers type-safe, tree-shakable nodes for 2000+ cloud services, with automatic icon injection and clusters for grouping. Developers love chaining nodes like `db.to(api).to(storage)` for quick cloudy draws, plus JSON roundtripping for version control. Multi-runtime support means no server setup—just code and render.

Who should use this?

Cloud architects sketching multi-provider systems, DevOps teams embedding diagrams in READMEs, and docs writers needing reproducible cloud diagrams from JSON. Ideal for frontend/backend devs documenting infra without Draw.io desktop or GitHub draw io templates.

Verdict

Grab it for prototyping cloud diagrams in TS—docs and playground are solid starters. At 10 stars and 1.0% credibility, it's an early port worth watching; test thoroughly before production.

(187 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.