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.

Important

This is an independent, unofficial project. StudyMermaid was built by a participant of an IBM SkillsBuild seminar. It is not affiliated with, endorsed by, or an official product of IBM.

"IBM", "IBM Bob", the Bob character, IBM Plex, and IBM Design Language are trademarks or assets of International Business Machines Corporation. The Bob artwork in public/bob.png remains the property of IBM and will be removed on request.

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: English
• Japanese version: use the language toggle in the top navigation, or add ?lang=ja 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 · 日本語}