本文へスキップ
株式会社オブライト
Game2026-05-17

Mermaid

別名: Mermaid.js / Mermaid diagram

テキストベースの記法でフローチャート・シーケンス図・ER図などを生成するJavaScriptライブラリ。Markdown中に埋め込んでブラウザでSVG描画でき、GitHubやNotionでもサポートされている。


概要

Mermaidはテキストで図を書けるためバージョン管理と相性が良く、設計ドキュメントをコードと同じリポジトリで管理できます。GitHubのMarkdownでもネイティブサポートされており、PRレビュー時のドキュメント共有に便利です。

Claude Codeとの連携

AIコーディングツールとの組み合わせで、コードからシーケンス図やアーキテクチャ図を自動生成するユースケースが増えています。Claude Codeとの組み合わせは Claude Code完全ガイド2026 を参照ください。

関連コラム

Software Development
Claude Code 完全ガイド2026 — AIエージェントコーディングの新時代
Anthropicが開発したClaude Codeは、コードベース全体を理解し自律的にコーディングするエージェント型開発ツールです。CLI、IDE、デスクトップ、Webで利用可能。Opus 4.6、MCP、Agent Teamsなど最新機能を網羅した2026年版完全ガイド。品川区・港区エリアの開発企業様必見。
Software Development
インテントドリブン開発完全ガイド2026|コードを書く時代から意図を伝える時代へ
2026年3月、ソフトウェア開発はインテントドリブン開発(意図駆動開発)へと大きくシフトしています。バイブコーディング、MCP、マルチエージェント開発など最新トレンドと、開発者の役割変化、日本企業の導入状況、実践的な導入ステップまで徹底解説します。
AI
バイブコーディング時代にこそDocDD(Document Driven Development)が効く——AI×設計ドキュメントで「作り直し地獄」を防ぐ実践ガイド【2026年版】
AIが自然言語から高速にコードを生成する「バイブコーディング」時代、最大のリスクは動くけど使えないコードが量産されることです。本記事では、DocDD(ドキュメント駆動開発)をAI開発と組み合わせることで、手戻りを最小化し品質と速度を両立させる実践手法を解説します。okikusan氏のZenn記事(2025年7月公開)で提唱された DocDD の概念を土台に、弊社でのAI壁打ち→plan.md→AI実装の運用ノウハウも紹介します。
Software Development
業務システム開発の進め方ガイド|要件定義から運用保守まで
業務システム開発の全工程を徹底解説。要件定義・設計・開発・テスト・導入・運用保守まで、品川区を拠点とするオブライトが成功のポイントをお伝えします。
Software Development
Reladrawとは — 座標を書かず「右に」「下に」で配置する相対配置の図解言語
Reladrawは、ノードを「右に」「下に」と相対配置で指定するテキストベースの図解言語だ。Mermaidの自動レイアウトとdraw.ioの座標指定のちょうど中間に位置し、npmやAIエージェント向けスキルで手早く導入できる。Hacker Newsで話題の新OSSの使い方・料金・既存ツールとの違いを解説する。
Software Development
archifyとは何か JSON IRで図解を「検証可能」にするエージェントスキル
GitHub Trending JavaScriptで1位を獲得したarchify(tt-a1i/archify)を解説。エージェントがJSON中間表現を出力し、決定論的にHTML/SVGへコンパイルする仕組み、インストール方法、Mermaid・draw.io・Excalidrawとの違いを整理する。

関連用語

お気軽にご相談ください

お問い合わせ