Gitrend

コードが生きる!LikeC4でアーキ図自動生成

TypeScript 2026/2/5
Summary
みんな!手書きのアーキテクチャ図、古くなってない? LikeC4はコードからリアルタイムで図を生成! もうメンテ不足に悩まされない、夢のツールが登場だ!

概要:なにこれ凄い?

皆さん、ご存知ですか?僕、GitHubトレンドを毎日チェックしてるんですけど、これを見た瞬間「うおおお!これはヤバい!」って叫んじゃいましたよ!C4モデルって、ソフトウェアアーキテクチャを分かりやすく表現するのにすごく良いフレームワークなんですけど、今までは手動で図を書くか、専用のDSLを使うことが多かったですよね?

LikeC4は、なんとTypeScriptのコードから直接、C4モデルのダイアグラムを生成しちゃうんです!これ、マジで感動しました。コードが常に最新のアーキテクチャを語るようになる。ドキュメントと実装の乖離問題、これで解決しちゃうんじゃないかな!?開発者の悩みを知り尽くした人が作ったとしか思えない!

ここが推し!

サクッと試そう(使用例)

これ、VS CodeにLikeC4拡張を入れて、.likec4/index.tsとかに保存するだけで、すぐに横に図がプレビューされるから、マジでやってみてほしい!インストールは簡単だよ!npm install @likec4/coreして、VS Code拡張入れるだけ!

// .likec4/index.ts
import { likeC4, system } from '@likec4/core';

const cloud = system('cloud')
  .title('Cloud System')
  .description('A simple cloud application');

const frontend = cloud.container('frontend')
  .title('Frontend')
  .technology('React, Next.js')
  .description('Serves the web application');

const backend = cloud.container('backend')
  .title('Backend API')
  .technology('Node.js, Express')
  .description('Handles business logic and data');

const database = cloud.container('database')
  .title('Database')
  .technology('PostgreSQL')
  .description('Stores application data');

frontend.uses(backend, 'Calls API');
backend.uses(database, 'Queries');

export const c4 = likeC4.model({
  elements: [
    cloud, frontend, backend, database
  ]
});

ぶっちゃけ誰向け?

まとめ

いやー、LikeC4、マジで熱いですよね!僕もこれを知ってから、もう頭の中はC4モデルでいっぱいです(笑)。コードがアーキテクチャ図のソースになるって、本当に革命的。これで開発スピードも上がるし、チーム内のコミュニケーションも円滑になること間違いなし!

まだ発展途上のプロジェクトだけど、これからの進化が本当に楽しみ!みんなもぜひ触ってみて、未来のソフトウェア開発を一緒に作っていこうぜ!