Skip to main content

Getting Started

This guide will help you get started with the Concept Mapping Tool.

Prerequisites​

  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • An InstantDB account (free tier available)

Creating Your First Map​

  1. Sign Up or Log In

    • Click the "Sign Up" button if you're new
    • Or log in with your existing account

  2. Create a New Map

    • Click "New Map" in the sidebar
    • Give your map a name
    • Click "Create"

  3. Add Your First Concept

    • Right-click on the canvas and select "Add Concept" from the context menu
    • Or double-click on the canvas to create a concept
    • Type the concept name
    • Press Enter to confirm

  4. Create Relationships

    Method 1: Option/Alt-Drag (Easiest)

    • Hold Option (Mac) or Alt (Windows/Linux) and hover over a concept
    • The handle expands to cover the entire node
    • Drag from anywhere on the node to another concept
    • Enter the relationship label and press Enter

    Method 2: Drag from Center Handle

    • Click and drag from the small center handle on a concept
    • Enter the relationship label
    • Press Enter to confirm

    Method 3: Triple Entry (Fast Keyboard Method)

    • Double-click on a concept node to edit its label
    • Type: "Concept1 verb phrase Concept2" (e.g., "Diagrams explain Architecture")
    • Press Enter
    • The system creates the relationship and new concept automatically
    • The new concept enters edit mode so you can continue typing more triples!

  5. Add Comments (Optional)

    • Right-click on the canvas and select "Add Comment"
    • Double-click the comment to edit its text
    • Drag connection handles to link comments to concepts

  6. Customize Appearance

    • Select any node or edge to see the floating toolbar
    • Use the toolbar to customize colors, styles, and line thickness
    • Changes are saved automatically

Undo and Redo​

The tool supports comprehensive undo/redo functionality for all your edits:

  • Undo: Press Cmd+Z (Mac) or Ctrl+Z (Windows/Linux), or click the undo button (↶) next to the map name
  • Redo: Press Cmd+Shift+Z (Mac) or Ctrl+Shift+Z (Windows/Linux), or click the redo button (↷) next to the map name

What can be undone:

  • Creating, updating, or deleting concepts
  • Creating, updating, or deleting relationships
  • Creating, updating, or deleting comments
  • Moving nodes (entire drag operations are grouped as one undoable action)
  • Editing labels, notes, or metadata
  • Style changes (colors, line styles, etc.)
  • Triple entry operations (creating a concept + relationship together)

Smart Operation Grouping:

  • When you drag a node, all position updates during the drag are grouped into a single undoable operation
  • When you use triple entry mode (e.g., "Noun verb Noun"), the concept update, relationship creation, and new concept creation are all grouped together
  • This means one undo restores everything related to that action

View Modes​

The tool supports multiple view modes:

  • Graph View: Visual node-and-edge representation (default)
  • Text View: Structured text representation with triple notation (appears as a draggable node on the canvas)
  • Both: Show graph and text view simultaneously

Toggle the text view using the FileText button in the React Flow controls (bottom-left of the canvas). The text view appears as a draggable node that you can position anywhere on the canvas.

Next Steps​