# Mermaid Architect: Keterampilan Diagram & Dokumentasi > Hasilkan diagram Mermaid yang komprehensif dan dokumen desain dengan orkestrasi cerdas, konversi kode-ke-diagram, dan utilitas Python. Mulai buat dokumentasi teknis terperinci dalam hitungan detik. - Canonical: https://nanoskill.ai/id/skills/mermaid-agent-skill - Markdown: https://nanoskill.ai/id/skills/mermaid-agent-skill.md - Author: SpillwaveSolutions - Published: 2026-05-26T01:25:42.765Z - Updated: 2026-07-19T03:48:37.206Z - Language: id - Source type: github - Popularity signal: 66 ## Sources - https://github.com/spillwavesolutions/design-doc-mermaid ## Install ```shell npx skills add https://github.com/spillwavesolutions/design-doc-mermaid ``` ## About Keterampilan Mermaid Architect memberdayakan pengembang, arsitek, dan penulis teknis untuk membuat dan mengelola diagram Mermaid dan dokumen desain yang komprehensif secara efisien. Dengan memanfaatkan orkestrasi cerdas dan pemuatan panduan sesuai permintaan, keterampilan ini menyederhanakan visualisasi sistem kompleks, alur kerja, dan struktur kode. Ini membantu pengguna menghasilkan diagram yang akurat dan menarik secara visual, memastikan komunikasi yang jelas dan dokumentasi yang selalu terkini. Keterampilan Claude Code yang kuat ini menawarkan fitur-fitur canggih seperti pembuatan kode-ke-diagram, memungkinkan Anda mengekstrak wawasan arsitektur langsung dari aplikasi Spring Boot atau FastAPI Anda. Ini juga mencakup kumpulan utilitas Python yang kaya untuk mengekstrak, memvalidasi, dan mengonversi diagram Mermaid ke format gambar, sehingga mudah diintegrasikan dengan alur kerja dokumentasi yang ada dan alat seperti Confluence. Sistem hierarkis memastikan penggunaan token yang efisien dan waktu respons yang cepat, memberikan pengalaman yang mulus. Baik Anda perlu mendokumentasikan API, memvisualisasikan arsitektur sistem, atau mengilustrasikan proses bisnis, Mermaid Architect menyediakan alat dan templat untuk menyelesaikan pekerjaan. Dengan dukungan untuk berbagai jenis diagram, simbol semantik Unicode, dan gaya kontras tinggi, diagram Anda akan informatif dan mudah diakses. Keterampilan ini juga menawarkan jalur pembelajaran terstruktur dan contoh untuk membantu pengguna dengan cepat menjadi mahir dalam membuat dokumentasi teknis terperinci. ## Key features - **Pembuatan Diagram Cerdas**: Buat berbagai diagram Mermaid, termasuk diagram aktivitas, deployment, arsitektur, dan urutan, untuk alur kerja, infrastruktur, komponen sistem, dan aliran API. - **Konversi Kode ke Diagram**: Secara otomatis menghasilkan diagram dari basis kode yang ada (misalnya, Spring Boot, FastAPI) atau file konfigurasi untuk memvisualisasikan arsitektur, deployment, dan aliran urutan. - **Pembuatan Dokumen Desain Komprehensif**: Menghasilkan dokumen desain lengkap dengan diagram Mermaid yang tertanam menggunakan template yang telah ditentukan untuk desain arsitektur, API, fitur, basis data, dan sistem. - **Simbol Semantik Unicode & Penataan Kontras Tinggi**: Tingkatkan kejelasan dan aksesibilitas diagram dengan lebih dari 100 simbol Unicode bermakna dan skema warna kontras tinggi untuk keterbacaan yang lebih baik. - **Utilitas Python untuk Manajemen Diagram**: Manfaatkan skrip Python untuk mengekstrak, memvalidasi, dan mengonversi diagram Mermaid ke gambar PNG/SVG, mendukung pemrosesan batch dan integrasi dengan alat seperti Confluence. ## Use cases - **Visualisasikan Arsitektur Perangkat Lunak**: Pengembang dan arsitek dapat menghasilkan diagram arsitektur dan deployment dari kode atau file konfigurasi untuk memahami komponen sistem dan infrastruktur. - **Dokumentasikan Aliran API dan Alur Kerja**: Penulis teknis dan insinyur dapat membuat diagram urutan dan aktivitas terperinci untuk mengilustrasikan interaksi API, proses bisnis, dan perjalanan pengguna. - **Otomatisasi Pembuatan Dokumen Desain**: Tim dapat dengan cepat menghasilkan dokumen desain terstruktur untuk berbagai keperluan (API, sistem, fitur) dengan diagram Mermaid yang otomatis tertanam, menghemat waktu dan memastikan konsistensi. - **Pertahankan Dokumentasi Teknis yang Selalu Terkini**: Pastikan dokumentasi tetap terkini dengan menghasilkan diagram langsung dari kode atau konfigurasi, dan dengan mudah mengonversinya ke format gambar untuk dibagikan dan kolaborasi. ## Result preview Lihat diagram Mermaid tentang sistem untuk platform pengiriman makanan yang dihasilkan oleh Keterampilan Agen ini. ![mermaid-architect-demo1](https://file.nanoskill.ai/mermaid-architect-demo1.jpg) ![mermaid-architect-demo-2](https://file.nanoskill.ai/mermaid-architect-demo-2.jpg) ![mermaid-architect-demo-3](https://file.nanoskill.ai/mermaid-architect-demo-3.jpg) ## Result walkthrough ### Langkah 1：Instal Tambahkan keterampilan ke agen Anda. ![mermaid-architect-step-1](https://file.nanoskill.ai/mermaid-architect-step-1.jpg) ### Langkah 2：Jelaskan proses Masukkan alur kerja, sistem, atau urutan yang ingin Anda visualisasikan. ![mermaid-architect-step-2](https://file.nanoskill.ai/mermaid-architect-step-2.jpg) ### Langkah 3：Tinjau Hasil Dapatkan diagram Mermaid yang dihasilkan berdasarkan deskripsi proses Anda. ![mermaid-architect-step-3](https://file.nanoskill.ai/mermaid-architect-step-3.jpg) ## Skill definition # Arsitek Putri Duyung - Skill Diagram & Dokumentasi Komprehensif **Versi 2.0** - Arsitektur hierarkis dengan orkestrasi cerdas Skill Claude Code yang andal untuk membuat diagram Putri Duyung dan dokumen desain menggunakan pemuatan panduan sesuai permintaan, pembuatan kode-ke-diagram, dan utilitas Python. ## Instalasi ### Instal Sekali Klik melalui Pasar Skilz Instal skill ini secara instan dari [Pasar Skilz](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/): ```bash skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid ``` ### Instalasi Manual Kloning langsung ke direktori skill Claude Code Anda: ```bash # Arahkan ke direktori skill Anda cd ~/.claude/skills # Kloning repositori git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git ``` ### Verifikasi Instalasi Setelah instalasi, verifikasi bahwa skill tersedia: ```bash # Daftar skill yang terinstal ls ~/.claude/skills/design-doc-mermaid # Atau tanyakan Claude Code # "Daftar skill saya yang terinstal" ``` ## Apa yang Dilakukan Skill Ini **Pembuatan Diagram Cerdas:** - Diagram aktivitas (alur kerja, proses, logika bisnis) - Diagram deployment (infrastruktur cloud, K8s, serverless) - Diagram arsitektur (komponen sistem, layanan mikro) - Diagram urutan (alur API, interaksi layanan) - Dokumen desain lengkap dengan diagram tertanam **Konversi Kode-ke-Diagram:** - Ekstrak arsitektur dari aplikasi Spring Boot - Hasilkan diagram deployment dari file konfigurasi - Buat diagram urutan dari panggilan metode - Dokumentasikan pipeline ETL dan aliran data **Manajemen Diagram:** - Ekstrak diagram Putri Duyung dari file Markdown - Validasi sintaks diagram dengan mermaid-cli - Konversi diagram ke gambar PNG/SVG - Proses batch seluruh direktori ## Mulai Cepat ### Buat Diagram Aktivitas ``` Pengguna: "Buat diagram aktivitas untuk pendaftaran pengguna dengan verifikasi email" ``` Skill akan: 1. Muat `references/guides/diagrams/activity-diagrams.md` 2. Gunakan template pola pendaftaran 3. Tambahkan simbol Unicode (πŸ” untuk keamanan, πŸ“§ untuk email, βœ… untuk sukses) 4. Terapkan gaya kontras tinggi 5. Keluarkan diagram Putri Duyung lengkap ### Hasilkan dari Kode ``` Pengguna: "Ini application.yml Spring Boot saya - buat diagram deployment" ``` Skill akan: 1. Analisis konfigurasi (sumber data, cache, keamanan) 2. Muat `references/guides/diagrams/deployment-diagrams.md` 3. Muat `examples/spring-boot/README.md` 4. Petakan konfigurasi ke sumber daya cloud 5. Hasilkan diagram deployment dengan spesifikasi sumber daya ### Buat Dokumen Desain ``` Pengguna: "Buat dokumen desain API untuk API kontak" ``` Skill akan: 1. Muat `assets/api-design-template.md` 2. Muat panduan diagram yang relevan (urutan, ER, arsitektur) 3. Hasilkan dokumen lengkap dengan diagram tertanam 4. Simpan ke `docs/design/api-contacts-v1-2025-01-13.md` ## Struktur ### Organisasi Hierarkis ``` mermaid-architect/ β”œβ”€β”€ SKILL.md # Orkestrator utama dengan pohon keputusan β”œβ”€β”€ README.md # File ini β”œβ”€β”€ CLAUDE.md # Instruksi Claude Code β”‚ β”œβ”€β”€ references/ # Bahan referensi β”‚ β”œβ”€β”€ mermaid-diagram-guide.md # Panduan umum warisan β”‚ └── guides/ # Panduan khusus (muat sesuai permintaan) β”‚ β”œβ”€β”€ diagrams/ β”‚ β”‚ β”œβ”€β”€ activity-diagrams.md # βœ… Selesai β”‚ β”‚ β”œβ”€β”€ deployment-diagrams.md # βœ… Selesai β”‚ β”‚ β”œβ”€β”€ architecture-diagrams.md # βœ… Selesai β”‚ β”‚ └── sequence-diagrams.md # βœ… Selesai β”‚ β”œβ”€β”€ code-to-diagram/ β”‚ β”‚ └── README.md # βœ… Selesai (panduan utama) β”‚ β”œβ”€β”€ unicode-symbols/ β”‚ β”‚ └── guide.md # βœ… Selesai (100+ simbol) β”‚ └── troubleshooting.md # βœ… Selesai (28 kesalahan umum) β”‚ β”œβ”€β”€ scripts/ # Utilitas Python β”‚ β”œβ”€β”€ extract_mermaid.py # βœ… Ekstrak & validasi diagram β”‚ └── mermaid_to_image.py # βœ… Konversi ke PNG/SVG β”‚ β”œβ”€β”€ examples/ # Pola spesifik bahasa β”‚ β”œβ”€β”€ spring-boot/ # βœ… Selesai β”‚ β”œβ”€β”€ fastapi/ # βœ… Selesai β”‚ β”œβ”€β”€ react/ # βœ… Selesai β”‚ β”œβ”€β”€ python-etl/ # βœ… Selesai β”‚ β”œβ”€β”€ node-webapp/ # βœ… Selesai β”‚ └── java-webapp/ # βœ… Selesai β”‚ └── assets/ # Template dokumen desain β”œβ”€β”€ architecture-design-template.md β”œβ”€β”€ api-design-template.md β”œβ”€β”€ feature-design-template.md β”œβ”€β”€ database-design-template.md └── system-design-template.md ``` ## Fitur Utama ### 1. Simbol Semantik Unicode Setiap diagram menggunakan simbol Unicode yang bermakna: ```mermaid graph TB User[πŸ‘€ Client] --> Gateway[🌐 API Gateway] Gateway --> Auth[πŸ” Auth Service] Gateway --> API[βš™οΈ API Service] API --> DB[(πŸ’Ύ Database)] API --> Cache[(⚑ Redis)] API --> Queue[πŸ“¬ Message Queue] Queue --> Worker[βš™οΈ Background Worker] ``` **Kategori Simbol:** - Infrastruktur: ☁️ 🌐 πŸ”Œ πŸ“‘ πŸ—„οΈ - Komputasi: βš™οΈ ⚑ πŸ”„ πŸš€ πŸ’¨ - Data: πŸ’Ύ πŸ“¦ πŸ“Š πŸ“ˆ πŸ—ƒοΈ - Pesan: πŸ“¨ πŸ“¬ πŸ“€ πŸ“₯ 🐰 - Keamanan: πŸ” πŸ”‘ πŸ›‘οΈ πŸšͺ πŸ‘€ - Pemantauan: πŸ“ πŸ“Š 🚨 ⚠️ βœ… ❌ ### 2. Gaya Kontras Tinggi Semua diagram menggunakan warna yang mudah diakses dan kontras tinggi - lihat SKILL.md untuk detail lengkap. ### 3. Utilitas Python #### Ekstrak Diagram ```bash # Daftar semua diagram dalam file python scripts/extract_mermaid.py document.md --list-only # Ekstrak ke file .mmd terpisah python scripts/extract_mermaid.py document.md --output-dir diagrams/ # Validasi semua diagram python scripts/extract_mermaid.py document.md --validate # Ganti diagram dengan referensi gambar (untuk Confluence) python scripts/extract_mermaid.py document.md --replace-with-images \ --image-format png --output-markdown output.md ``` #### Konversi ke Gambar ```bash # File tunggal python scripts/mermaid_to_image.py diagram.mmd output.png # Tema dan ukuran kustom python scripts/mermaid_to_image.py diagram.mmd output.svg \ --theme dark --background white --width 1200 # Konversi batch direktori python scripts/mermaid_to_image.py diagrams/ output/ \ --format png --recursive # Dari stdin echo "graph TD; A-->B" | python scripts/mermaid_to_image.py - output.png ``` ## Persyaratan ### Untuk Pembuatan Diagram - Sistem skill Claude Code (otomatis) - Panduan dan template (termasuk dalam skill ini) ### Untuk Validasi & Konversi Gambar ```bash # Instal mermaid-cli secara global npm install -g @mermaid-js/mermaid-cli # Verifikasi instalasi mmdc --version ``` ### Untuk Skrip Python - Python 3.7+ - Tidak diperlukan paket tambahan (hanya menggunakan stdlib) ## Jalur Pembelajaran ### Baru dengan Diagram Putri Duyung? 1. **Mulai dengan Diagram Aktivitas** - Baca `references/guides/diagrams/activity-diagrams.md` 2. **Pelajari Simbol Unicode** - Baca `references/guides/unicode-symbols/guide.md` 3. **Coba Contoh** - Gunakan pola dari `examples/spring-boot/` 4. **Validasi Hasil Kerja Anda** - Jalankan `python scripts/extract_mermaid.py --validate` ### Perlu Mendokumentasikan Kode yang Ada? 1. **Identifikasi Framework** - Spring Boot, FastAPI, React, dll. 2. **Muat Panduan Contoh** - Baca `examples/{your-framework}/README.md` 3. **Cocokkan Pola** - Temukan pola kode serupa di contoh 4. **Hasilkan Diagram** - Gunakan template dari panduan 5. **Validasi** - Gunakan skrip validasi ### Membuat Dokumen Desain? 1. **Pilih Tipe Template** - Arsitektur, API, Fitur, Database, atau Sistem 2. **Muat Template** - Baca dari `assets/{type}-design-template.md` 3. **Isi Bagian** - Ganti placeholder dengan konten aktual 4. **Tambahkan Diagram** - Muat panduan diagram sesuai kebutuhan untuk setiap bagian 5. **Gunakan Simbol** - Perkaya dengan simbol Unicode di seluruh 6. **Simpan** - Tempatkan di `docs/design/` dengan stempel waktu ## Cara Kerja Sistem Hierarkis ### Pendekatan Tradisional (Tidak Efisien) - Muat seluruh dokumentasi skill (~50KB) - AI memproses semua template dan contoh - Penggunaan token tinggi - Waktu respons lambat ### Pendekatan Hierarkis (Efisien) 1. **Pengguna membuat permintaan** β†’ AI menganalisis maksud 2. **Pohon keputusan aktif** β†’ Menentukan panduan yang dibutuhkan 3. **Muat hanya yang dibutuhkan** β†’ Membaca panduan spesifik (~2-5KB) 4. **Hasilkan keluaran** β†’ Menggunakan template yang ditargetkan 5. **Efisien token** β†’ 10x lebih sedikit konteks yang dibutuhkan ### Alur Contoh **Pengguna:** "Buat diagram deployment untuk pengaturan Docker Compose saya" **Pohon Keputusan:** ``` 1. Analisis: "diagram deployment" + "Docker Compose" 2. Tentukan: deployment-diagrams.md dibutuhkan 3. Muat: references/guides/diagrams/deployment-diagrams.md (2KB) 4. Temukan pola: template Docker Compose ada 5. Hasilkan: Menggunakan template + simbol Unicode 6. Keluaran: Diagram lengkap dalam <30 detik ``` **Token Digunakan:** ~2.000 (vs ~10.000 dengan pendekatan tradisional) ## Status Penyelesaian βœ… **Selesai:** - Orkestrator pohon keputusan hierarkis - Panduan diagram aktivitas dengan template - Panduan diagram deployment (AWS, GCP, K8s, serverless, Docker) - Panduan simbol Unicode (100+ simbol) - Skrip ekstrak Putri Duyung dengan validasi - Skrip konversi Putri Duyung ke gambar - Contoh kode-ke-diagram Spring Boot - Template dokumen desain (5 tipe) - Sistem gaya kontras tinggi 🚧 **Dalam Progres:** - Contoh FastAPI - Contoh arsitektur komponen React - Contoh pipeline ETL Python πŸ“‹ **Direncanakan:** - Panduan diagram arsitektur - Panduan diagram urutan - Panduan utama kode-ke-diagram - Contoh Node.js/Express - Contoh aplikasi web Java ## Berkontribusi Untuk menambahkan panduan tipe diagram baru: 1. Buat panduan di `references/guides/diagrams/{type}-diagrams.md` 2. Sertakan: - Kapan digunakan - Sintaks dasar - Pola umum (3-5 template) - Contoh simbol Unicode - Praktik terbaik 3. Perbarui pohon keputusan `SKILL.md` 4. Tambahkan contoh dengan pemetaan kode Untuk menambahkan contoh bahasa baru: 1. Buat direktori di `examples/{framework}/` 2. Tambahkan `README.md` dengan: - Ikhtisar framework - Diagram arsitektur dari struktur - Diagram deployment dari konfigurasi - Diagram urutan dari kode - Diagram aktivitas dari logika 3. Perbarui tabel kode-ke-diagram `SKILL.md` ## Lisensi Bagian dari Claude Code Skills - Lisensi MIT ## Skill Terkait - **confluence** - Unggah diagram ke Confluence - **plantuml** - Format diagram alternatif ## Tautan - [Repositori GitHub](https://github.com/SpillwaveSolutions/design-doc-mermaid) - [Daftar Pasar Skilz](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/) - [Dokumentasi Resmi Putri Duyung](https://mermaid.js.org/) --- **Versi:** 2.0.0 **Diperbarui:** 2025-01-13 **Dikelola oleh:** SpillwaveSolutions ## FAQ ### Jenis diagram Mermaid apa saja yang bisa dihasilkan oleh keterampilan ini? Keterampilan ini bisa menghasilkan diagram aktivitas, diagram deployment, diagram arsitektur, dan diagram urutan. Ini mendukung visualisasi alur kerja, infrastruktur cloud, komponen sistem, dan interaksi API. ### Bagaimana cara kerja konversi kode ke diagram? Keterampilan ini menganalisis kode atau file konfigurasi (misalnya, application.yml Spring Boot) dan menggunakan pola serta panduan yang telah ditentukan untuk secara otomatis menghasilkan diagram Mermaid yang sesuai, seperti diagram deployment atau urutan. ### Bisakah saya membuat dokumen desain lengkap dengan keterampilan ini? Ya, keterampilan ini mencakup template untuk berbagai dokumen desain (arsitektur, API, fitur, basis data, sistem). Ini bisa menghasilkan dokumen lengkap dengan diagram Mermaid yang tertanam berdasarkan masukan Anda dan template yang dipilih. ### Apa keuntungan dari sistem hierarkis untuk menghasilkan diagram Mermaid? Sistem hierarkis secara efisien menganalisis maksud Anda dan hanya memuat panduan serta template yang diperlukan (biasanya 2-5KB) alih-alih seluruh dokumentasi keterampilan. Ini secara signifikan mengurangi penggunaan token dan mempercepat waktu respons. ### Apakah ada utilitas Python yang disertakan dengan keterampilan ini? Ya, keterampilan ini menyediakan skrip Python untuk mengekstrak diagram Mermaid dari file Markdown, memvalidasi sintaksnya, dan mengonversinya menjadi format gambar PNG atau SVG. Utilitas ini juga mendukung pemrosesan batch. ### Apa saja persyaratan untuk menggunakan fitur validasi dan konversi gambar? Untuk validasi diagram dan konversi gambar, Anda perlu menginstal \`mermaid-cli\` secara global melalui npm (\`npm install -g @mermaid-js/mermaid-cli\`). Skrip Python membutuhkan Python 3.7+.