Skip to main content
StrataNote features a powerful Markdown editor built on top of CodeMirror 6. It combines code editing speed with visual rendering capabilities, making it easy to build a structured personal knowledge base.

​
Editing Modes

The editor supports three flexible layouts to match your working style:
  1. Edit Mode (Code Only): Focus entirely on writing raw Markdown text.
  2. Split View (Edit & Preview): Live dual-pane view. Editing on the left automatically updates the formatted HTML preview on the right.
  3. Preview Mode (Formatted Only): Read notes in a clean, publish-ready layout with fully rendered styles and components.
StrataNote uses wiki-style links (Wikilinks) to build network connections between notes, mimicking the workflow of modern tools like Obsidian.

​
Creating a Connection

To link the current note to another note, type double square brackets: [[Name of Target Note]] If you want the link to show a different text than the note’s filename, use the pipe | character: [[Name of Target Note|Custom Label Text]]

​
Autocomplete Dropdown

When you type [[ inside the editor, an autocomplete suggestion box appears under your cursor, listing all existing notes.
  • Use Arrow Up / Arrow Down to navigate the list.
  • Press Enter or click to insert the selected note link.

Screenshot: Wikilinks Autocomplete Dropdown

Interface Preview: Markdown editor text with cursor positioned after double brackets [[. A dropdown panel floats below, showing a list of notes with search highlighting.

​
Callout Blocks (Obsidian Style)

Highlight important warnings, tips, or notes using Obsidian-style callouts. Syntactically, they are blockquotes with a special tag:

​
Supported Callout Types

Screenshot: Rendered Callouts in Preview Mode

Interface Preview: Rendered preview pane showing multiple callout blocks with left accent borders, colorful icons (info, lightbulb, triangle alert), and bold titles.

​
Editorial Scroll Synchronization

To keep your place when working in Split View, StrataNote implements automatic scroll synchronization:
  • As you scroll the editor pane, the preview pane automatically slides to the corresponding section of the rendered document.
  • The matching algorithm maps source code lines to rendered HTML nodes, ensuring precise tracking even on long documents with complex tables, images, or code blocks.

​
Diagram Rendering (Mermaid & PlantUML)

StrataNote includes built-in rendering engines for visual diagrams and data flows directly inside your documents.

​
Mermaid.js Diagrams

Create flowcharts, sequence diagrams, ER diagrams, mindmaps, and Gantt charts using standard fenced code blocks:

​
PlantUML Diagrams (100% Offline Java Support)

StrataNote supports PlantUML diagrams (```plantuml, ```puml, ```uml or raw @startuml ... @enduml blocks).
  • Local Backend Engine: Rendered 100% offline via the embedded plantuml.jar backend utility without sending private diagram code to public external servers.
  • Disk Caching: Rendered SVG diagrams are cached locally by SHA-256 hash for instant 0ms reload.

​
Interactive Pan & Zoom & Diagram Export

Clicking any rendered Mermaid or PlantUML diagram opens a Fullscreen Interactive Viewer supporting:
  • Drag-to-pan positioning.
  • Mouse-wheel zooming centered on the cursor.
  • Zoom controls (+ / - / Reset / Close).
  • Export Options: Instantly export your diagram as high-definition PNG (2X HD) or standalone SVG vector files.
  • Adaptive Canvas: Automatically detects light vs. dark diagram backgrounds to prevent black border clipping on light schemes.

​
Keyboard Shortcuts

  • Ctrl + S (or Cmd + S on macOS) — Instantly save changes to the local filesystem and sync to the server.
  • Tab — Indent list items, code blocks, or text.
  • Shift + Tab — Unindent lists or code blocks.