Skip to content

Mind Map

Mind maps are diagrams used to visually organize information hierarchically. They're excellent for brainstorming, note-taking, and organizing complex ideas.

Syntax

Basic Elements

  • Root: The central idea
  • Branches: Main topics and subtopics
  • Square Brackets: [text] for formatting
  • Parentheses: (text) for formatting

Basic Example

Code:
mermaid
mindmap
    root((Mind Map))
        Programming
            Python
            JavaScript
            Java
        Design
            UI
            UX
        Database
            SQL
            NoSQL
Ctrl + Enter|

Advanced Example

Here's a more detailed mind map for a web development project:

Code:
mermaid
mindmap
    root((Web Development))
        Frontend
            HTML
                Structure
                Semantics
            CSS
                Styling
                Layout
                    Flexbox
                    Grid
                Animation
            JavaScript
                DOM
                Events
                Frameworks
                    React
                    Vue
                    Angular
        Backend
            Languages
                Python
                Node.js
                Java
            Frameworks
                Express
                Django
                Spring
            Database
                SQL
                    MySQL
                    PostgreSQL
                NoSQL
                    MongoDB
                    Redis
        DevOps
            Version Control
                Git
                SVN
            CI/CD
                Jenkins
                GitHub Actions
            Deployment
                Docker
                Kubernetes
Ctrl + Enter|

Formatting Options

Shapes and Styles

Code:
mermaid
mindmap
    root((Central Topic))
        [Square Bracket Topic]
            (Round Bracket Topic)
                ))Cloud Topic((
                    ))Another Cloud((
        [Another Square Topic]
            (Another Round Topic)
Ctrl + Enter|

Icons and Markers

Code:
mermaid
mindmap
    root((Project Planning))
        [Priority Tasks]::icon(fa fa-star)
            Task 1
            Task 2
        [Timeline]::icon(fa fa-calendar)
            Week 1
            Week 2
        [Resources]::icon(fa fa-users)
            Team A
            Team B
Ctrl + Enter|

Additional Features

Multiple Levels

Code:
mermaid
mindmap
    root((Skills))
        Technical
            Programming
                Frontend
                Backend
            Database
                Design
                Administration
        Soft Skills
            Communication
                Written
                Verbal
            Leadership
                Team Management
                Decision Making
Ctrl + Enter|

Styling

The mind map automatically:

  • Centers the root node
  • Arranges branches hierarchically
  • Uses different shapes for nodes
  • Applies consistent spacing
  • Shows relationships clearly

Tips

  • Start with a clear central idea
  • Use concise labels
  • Organize related concepts together
  • Limit the depth of branches
  • Use consistent formatting
  • Keep the structure balanced
  • Add visual hierarchy with shapes
  • Focus on key relationships
  • Use meaningful groupings