From plantuml-salt
Generates precise PlantUML Salt wireframes for mobile and web apps using best practices to avoid parsing errors like one-line `} | {`, uniform columns, and nesting issues. Use for text-based screen design or fixing broken diagrams.
npx claudepluginhub sean-sunagaku/claude-code-plugin --plugin plantuml-saltThis skill uses the workspace's default tool permissions.
Salt 図を生成する前に必ず守るべきルール。これを守らないとパースエラーやレイアウト崩れが起きる。
Creates PlantUML diagrams for UML (sequence, class, component, deployment, state, activity, use case, timing) and non-UML like C4 models, ER diagrams, Gantt charts, mindmaps, network diagrams, wireframes.
Creates and renders UI wireframes from Markdown using wiremd. Converts descriptions, Jira tickets, PRDs, or React/JSX into visual HTML mockups for prototyping screens.
Generates UI action flows and PlantUML Salt wireframes from functional requirements. Two-step process with user feedback: action flow diagram, then full screen layouts and design notes.
Share bugs, ideas, or general feedback.
Salt 図を生成する前に必ず守るべきルール。これを守らないとパースエラーやレイアウト崩れが起きる。
} | { は絶対に1行で書く横並びパネルの区切り } | { を改行すると壊れる。
NG:
}
|
{
OK:
} | {
NG:
{#
名前 | 値
A | B | C
}
OK:
{#
名前 | 値 | 備考
A | B | C
}
} の対応を必ず確認する1つでもずれると全体が壊れる。インデントで可読性を確保すること。
^ は必ずペアで閉じるNG: ^値^項目1^項目2
OK: ^値^項目1^項目2^
{+ を使うとモバイル画面っぽくなるモバイルアプリのワイヤーフレームには {+ を基本にする。
全コンポーネント一覧、レイアウト修飾子、セパレータの詳細は references/syntax-guide.md を参照。
主要なもの:
[ラベル]"テキスト "（末尾スペースで幅調整）^値^（閉）/ ^選択値^項目1^項目2^（開）[ ] OFF / [X] ON() OFF / (X) ON<&person> <&home> <&magnifying-glass> 等（OpenIconic）| 記法 | 用途 |
|---|---|
{ | 縦並び（デフォルト） |
{+ | 外枠付き |
{# | 全罫線テーブル |
{! | 縦線のみ |
{- | 横線のみ |
{/ | タブ |
{* | メニューバー |
{T | ツリー |
{^"名前" | グループボックス（カード風） |
{S | スクロールバー |
モバイル画面の具体的なパターン集は references/mobile-patterns.md を参照。
基本構成は「ナビバー + メインコンテンツ + ボトムタブ」の3層:
@startsalt
{+
{#
<&arrow-left> | **画面タイトル** | <&ellipses>
}
--
メインコンテンツ
.
==
{#
<&home> ホーム | <&list> タスク | <&bell> 通知 | <&person> 設定
}
}
@endsalt
アクティビティ図に Salt を埋め込んで画面遷移フローを表現できる。 詳細は references/flow-patterns.md を参照。
references/syntax-guide.md から選ぶreferences/mobile-patterns.md のパターンを使うreferences/flow-patterns.md を参照する