markdown-viewer/bpmn

PlantUML構文とBPMN、EIP、リーンマッピングのステンシルアイコンを使用してビジネスプロセス図を作成します。ワークフロー自動化、承認チェーン、メッセージベースの統合パターン、バリューストリームマッピングに最適です。

bpmn とは?

このスキルは、マークダウンビューア内でPlantUMLを使用してビジネスプロセス図(BPMN図、EIP図、リーンマッピング図)をレンダリングします。開発者はPlantUMLのテキストベースのシンタックスを使って、ワークフロー自動化、承認チェーン、メッセージ統合パターン、バリューストリームマッピングを視覚的にモデリングできます。主にマークダウン対応の開発環境(例:VS Code、Obsidian、GitHubなど)で動作し、コードとして管理可能な図を生成します。PlantUML記法を学習する必要はありますが、複雑なプロセスを素早くドキュメント化・共有できる点が大きな利点です。このスキルは特に、Agile開発やDevOps文脈でのプロセス可視化に有用です。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/bpmn

Installed? Explore more 生産性&コラボレーション skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

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

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

ドキュメント

bpmn は何をしますか?

PlantUML構文とBPMN、EIP、リーンマッピングのステンシルアイコンを使用してビジネスプロセス図を作成します。ワークフロー自動化、承認チェーン、メッセージベースの統合パターン、バリューストリームマッピングに最適です。

概要

このスキルは、マークダウンビューア内でPlantUMLを使用してビジネスプロセス図をレンダリングします。テキストベースの図を作成できるため、バージョン管理やコラボレーションが容易になります。

使用方法

マークダウンファイル内で、以下のようにPlantUMLコードブロックを作成します:

@startuml
' BPMN図の例
!include <bpmn/bpmn>

start
:タスク;
stop
@enduml

対応ステンシル

  • BPMN: ビジネスプロセスモデル表記法(Business Process Model and Notation)
  • EIP: エンタープライズ統合パターン(Enterprise Integration Patterns)
  • リーンマッピング: リーン価値ストリームマッピング(Lean Value Stream Mapping)

例

BPMN図

@startuml
!include <bpmn/bpmn>
start
:申請受付;
if (承認?) then (はい)
  :処理実行;
else (いいえ)
  :却下;
endif
stop
@enduml

EIP図

@startuml
!include <eip/eip>

' メッセージフィルタ
component [メッセージソース] as source
component [フィルタ] as filter
component [処理] as processor

source --> filter
filter --> processor
@enduml

リーンマッピング図

@startuml
!include <lean/lean>

' 価値ストリーム
component [注文受付] as order
component [生産] as production
component [出荷] as shipment

order --> production : リードタイム
production --> shipment : 在庫
@enduml

注意事項

  • PlantUMLのシンタックスに従って記述してください
  • アイコンの詳細な使用方法は、PlantUML公式ドキュメントを参照してください
  • 一部の環境では、PlantUMLサーバーへのアクセスが必要な場合があります

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/architecture

Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.

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.

関連スキル