LibreAI / デザイン / diagram-as-code
// design · awslabs/diagram-as-code

diagram-as-code

diagram-as-codeは、awslabsが公開しているオープンソースのデザインプロジェクトです(GitHub: awslabs/diagram-as-code)。GitHubスターは1,583、フォークは105で、Apache-2.0ライセンスの下で公開されています。GitHubでの最終更新は2026年9月16日です。

Diagram-as-code for AWS architecture.

★ 1.6k スター⑂ 105 フォークApache-2.0更新 2026年9月
▦ ビジュアル — このプロジェクトのREADMEには埋め込み可能なスクリーンショットがないため、
ここではプレースホルダーを表示しています。下のガイド自体は完全な内容です。
// プロジェクトの基本情報

プロジェクト基本情報

GitHubスター
1,583
フォーク
105
ライセンス
Apache-2.0
GitHubでの最終更新
2026年9月16日
カテゴリ
デザイン
掲載タイプ
完全なインストールガイド
公式サイト
GitHub repo
// 仕組み

仕組み

  1. Pick the surface

    Whiteboard, diagrams-as-code, or component library — match the artifact.

  2. Start from templates

    Community templates and themes skip the blank page.

  3. Collaborate

    Real-time editing and version history included.

  4. Export & ship

    SVG/PNG/code output drops into products and docs.

// 機能

選ばれる理由

Diagrams as code

Version diagrams in git alongside your code.

Real-time collaboration

Multiplayer cursors without the enterprise invoice.

No per-seat fees

The whole team joins free.

Templates galore

Community starters for every common artifact.

Export anywhere

SVG, PNG, PDF, and framework code.

Self-hostable

Run the whole studio on your own server.

Advertisement
// 自分で実行

自分で実行してみる

  1. Step 1 — Clone the repo

    Download the source and move into the project folder.

    git clone https://github.com/awslabs/diagram-as-code.git
    cd diagram-as-code
  2. Step 2 — Check the README

    Every project documents its own setup; start with install requirements.

    cat README.md | head -60
  3. Step 3 — Run it

    Follow the project's launch command — Docker, pip, npm, or a binary release.

    # see README for the exact launch command
// 活用例

作れるもの

Advertisement
// よくある質問

よくある質問

Who maintains diagram-as-code?

It is an open-source project at awslabs/diagram-as-code with 105 forks. Check the repo's contributors and recent commits to see how active maintenance is.

Is diagram-as-code free for commercial use?

Apache 2.0 licensed — commercial use allowed with attribution.

Can I self-host?

Most of these offer Docker images for private instances.

Is real-time collaboration solid?

Yes — CRDT-based editing is the standard approach now.

Can it replace Figma?

For whiteboarding and diagrams, yes. Deep product design still favors Figma's ecosystem.

// さらに探索

似ているツール

デザイン

dingtalk-workspace-cli

DingTalk Workspace is an officially open-sourced cross-platform CLI tool from DingTalk. It unifies DingTalk’s full suite of product capabilities into a singl…

★ 3.2k スターApache-2.0
ガイドを見る →
デザイン

ui

Open-source components, blocks, and AI agents designed to speed up your workflow. Import them seamlessly into your favorite tools through Registry and MCPs.

★ 12.1k スターMIT
ガイドを見る →
デザイン

sumo

Eclipse SUMO is an open source, highly portable, microscopic and continuous traffic simulation package designed to handle large networks. It allows for inter…

★ 4.2k スターEPL-2.0
ガイドを見る →
デザイン

structurizr

Models-as-code tool for the C4 software architecture model

★ 429 スターApache-2.0
ガイドを見る →
デザイン

archify

Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill

★ 79.8k スターMIT
ガイドを見る →
デザイン

draw.io Desktop

draw.io Desktop — the official offline desktop app for diagrams.net: flowcharts, architecture diagrams and wireframes in an Electron app that never sends your diagram data anywhere, GPL-3.0

★ 63.6k スターGPL-3.0
ガイドを見る →
// 代替候補

代替候補: デザイン

LibreAIカタログに掲載されたデザインプロジェクトの中で最もスターの多いもの — diagram-as-codeが合わなかった場合に検討したい、現実的な候補リストです。

// さらに見る design

さらに見る: デザイン

カタログの中でdiagram-as-codeとスター数が近いデザインプロジェクト — 前後の棚もそのまま見て回れます。

diagram-as-codeを入手する

無料でオープン — ソースコードを入手して、リポジトリにスターを付け、作り始めましょう。