Communitygithub.com

markdown-viewer/architecture

HTML/CSSテンプレートを使用して、色分けされた階層とグリッドレイアウトでシステムアーキテクチャ図を作成します。テクノロジースタック、マイクロサービストポロジー、多層アプリケーション設計に最適です。

architecture とは？

このスキルは、HTMLとCSSテンプレートを活用して、視覚的にわかりやすい階層化されたシステムアーキテクチャ図を作成するためのツールです。色分けされた階層（ティア）とグリッドレイアウトを使用することで、複雑なシステム構造を直感的に表現できます。テクノロジースタック、マイクロサービストポロジー、多層アプリケーション設計など、さまざまなシステム構成の図示に最適です。主にMarkdownビューア上で動作し、HTMLレンダリング機能を利用して、コード記述だけでプロフェッショナルな見た目の図を生成できます。このスキールを使用することで、ドキュメントや設計書におけるシステム構造の説明が大幅に効率化され、チーム内のコミュニケーションが円滑になります。

対応~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/architecture
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

architecture は何をしますか？

HTML/CSSテンプレートを使用して、色分けされた階層とグリッドレイアウトでシステムアーキテクチャ図を作成します。テクノロジースタック、マイクロサービストポロジー、多層アプリケーション設計に最適です。

概要

このスキルは、システムアーキテクチャを視覚的に表現するためのHTML/CSSテンプレートを提供します。以下のような用途に適しています：

  • テクノロジースタックの図示
  • マイクロサービストポロジーの可視化
  • 多層アプリケーション設計の表現

使用方法

  1. 作成したいアーキテクチャ図の階層を定義します。
  2. 各階層に色を割り当てます。
  3. グリッドレイアウトを使用して各コンポーネントを配置します。

テンプレート例

<div class="architecture-diagram">
  <div class="tier tier-1" style="background-color: #e3f2fd;">
    <h3>プレゼンテーション層</h3>
    <div class="component">React UI</div>
    <div class="component">モバイルアプリ</div>
  </div>
  <div class="tier tier-2" style="background-color: #c8e6c9;">
    <h3>アプリケーション層</h3>
    <div class="component">API Gateway</div>
    <div class="component">マイクロサービス</div>
  </div>
  <div class="tier tier-3" style="background-color: #fff9c4;">
    <h3>データ層</h3>
    <div class="component">PostgreSQL</div>
    <div class="component">Redis</div>
  </div>
</div>

カスタマイズ

  • 各階層の色は自由に変更できます。
  • グリッドレイアウトの列数や間隔を調整できます。
  • コンポーネントにラベルやアイコンを追加できます。

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

markdown-viewer/archimate

Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.

markdown-viewer/bpmn

Create business process diagrams using PlantUML syntax with BPMN, EIP, and Lean Mapping stencil icons. Best for workflow automation, approval chains, message-based integration patterns, and value stream mapping.

markdown-viewer/canvas

Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.

markdown-viewer/cloud

Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints.

markdown-viewer/data-analytics

Create data pipeline and analytics architecture diagrams using PlantUML syntax with database/analytics stencil icons. Best for ETL pipelines, data lakes, real-time streaming, data warehousing, and BI dashboard design.

markdown-viewer/graphviz

Create directed/undirected graphs using DOT language with automatic layout. Best for dependency trees, call graphs, package hierarchies, and module relationships requiring fine-grained edge routing.

markdown-viewer/infocard

Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.

markdown-viewer/iot

Create IoT architecture diagrams using PlantUML syntax with device and sensor stencil icons. Best for smart home, industrial IoT (IIoT), fleet management, edge computing, and sensor network layouts.

markdown-viewer/mindmap

Create hierarchical mind maps using PlantUML @startmindmap syntax. Best for brainstorming, topic decomposition, study notes, and decision trees with automatic radial layout, left/right branches, and per-node styling.

markdown-viewer/network

Create network topology diagrams using PlantUML syntax with mxgraph device icons (Cisco, Citrix, etc.). Best for LAN/WAN layouts, datacenter interconnects, and physical/logical network design.

markdown-viewer/security

Create security architecture diagrams using PlantUML syntax with identity, encryption, firewall, and compliance stencil icons. Best for IAM flows, zero-trust models, encryption pipelines, and threat detection architectures.

markdown-viewer/uml

Create UML diagrams using PlantUML syntax. Best for software modeling — Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with concise text-based notation and auto-layout.

markdown-viewer/vega

Create data-driven charts with Vega-Lite (declarative) and Vega (programmatic). Best for statistical visualization of numeric data — bar, line, scatter, heatmap, area, radar charts, and word clouds.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community