diagram-design
技術図やプロダクト図（アーキテクチャ、フローチャート、シーケンス、ステートマシン、ER図/データモデル、タイムライン、スイムレーン、象限図、ネストされた図、ツリー図、レイヤースタック、ベン図、ピラミッド図）をインラインSVG付きのスタンドアロンHTMLファイルとして作成できます。ニュートラルな編集スキンと初回起動時のゲートを搭載しており、ユーザーが図の生成前に自社のウェブサイトからスタイルガイド（色、フォント）をカスタマイズするよう促します。アノテーション・コールアウト機能と、オプションのスケッチ風バリアントも含まれています。
description の原文を見る
Create technical and product diagrams — architecture, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, nested, tree, layer stack, venn, pyramid — as standalone HTML files with inline SVG. Ships with a neutral editorial skin and a first-run gate that prompts users to customize the style guide (colors, fonts) from their own website before generating. Includes annotation-callout primitive and optional sketchy variant.
SKILL.md 本文
ダイアグラムデザイン
インラインSVGとCSSを含む自己完結型HTMLファイルとして、視覚的なダイアグラムを作成できます。意見のあるエディトリアルデザインシステムに従っています。
13種類のダイアグラム。1つの共有デザインシステム、複雑性予算、および判断ゲート。タイプ固有の規約はreferences/に存在し、タイプを選択したときのみ読み込まれます。
0. 初回セットアップ — スタイルガイドゲート
新しいプロジェクトで最初のダイアグラムを生成する前に、スタイルガイドがカスタマイズされていることを確認してください。
references/style-guide.mdを開き、デフォルトトークンを確認します。まだ出荷時のデフォルト(ペーパー#faf7f2、インク#1c1917、アクセント#b5523a ラスト)のままの場合、一時停止してユーザーに尋ねます:
*「このプロジェクトでは初めてのダイアグラムです。スタイルガイドはまだデフォルト(ニュートラルなストーン+ラスト)です。ブランドに合わせてカスタマイズしたいですか？オプション:(a)オンボーディングを実行 — ウェブサイトから色とフォントを取得します、(b)トークンを手動で貼り付ける、(c)とりあえずデフ
...
詳細情報
- 作者
- codeboltai
- ライセンス
- 不明
- 最終更新
- 2026/5/1
Source: https://github.com/codeboltai/codeboltdocs / ライセンス: 未指定