StudyMermaid

Learn Mermaid diagram syntax interactively — with IBM Bob as your guide.

---

StudyMermaid is a bilingual (Japanese / English) interactive learning site for Mermaid — the text-to-diagram tool used across GitHub, Notion, GitLab, and more.

Built with IBM Bob, IBM's AI coding assistant. Bob acts as your coach throughout the lessons: introducing each chapter, dropping tips before exercises, and cheering you on at the finish line.

What you'll learn

Five chapters, each with explanatory text and a live split-pane editor that renders diagrams as you type:

#	Chapter	Topics
01	What is Mermaid?	How Mermaid works, why to use it, your first diagram
02	Flowchart Basics	Directions (LR / TD), node shapes, edge types
03	Flowchart Advanced	Subgraphs, node styling, practical login flow
04	Sequence Diagram Basics	Participants, messages, activation bars, notes
05	Sequence Diagram Advanced	loop, alt/opt branching, full API fetch flow

Tip

Switch between Japanese and English at any time using the language toggle button in the top navigation bar.

Live site

https://kmch4n.github.io/StudyMermaid/

• Default language: Japanese (?lang=ja)
• English version: add ?lang=en to the URL

Tech stack

Layer	Technology
Framework	React 19 + Vite 8
Language	TypeScript (strict mode)
Styling	Tailwind CSS v4 — IBM Design Language tokens
Diagrams	mermaid.js v11
Fonts	IBM Plex Sans + IBM Plex Mono
Hosting	GitHub Pages via GitHub Actions

Project structure

src/
  components/
    Bob.tsx             — IBM Bob mascot: hero banner + speech bubbles
    ChapterView.tsx     — chapter content renderer
    LiveEditor.tsx      — split-pane: code editor + live preview
    MermaidPreview.tsx  — wraps mermaid.render()
  content/
    ja/                 — Japanese chapter content (× 5)
    en/                 — English chapter content (× 5)
  data/chapters.ts      — locale-aware chapter loader
  i18n.ts               — locale detection, UI strings (ja / en)
  types.ts              — shared TypeScript types

How it was built

This project was developed end-to-end with IBM Bob, including:

• Architecture decisions and technology stack selection
• All React components and TypeScript types
• Bilingual chapter content (Japanese + English)
• IBM Design Language styling
• GitHub Pages deployment pipeline

#withibmbob

---

_{Powered by mermaid.js · Built with IBM Bob · English · 日本語}