FlashNote
Home

📖 FlashNote User Manual

Welcome to FlashNote! This manual guides you through the dual-track writing workspace, Tiptap rich text editor, interactive Mermaid diagrams, KaTeX mathematical formulas, and cloud sync workflows.

🚀 1. Quick Start

1. Open the Sidebar & Keyboard Shortcuts

  • Persistent Sidebar: Click the FlashNote extension icon in the browser toolbar, or select FlashNote in the Chrome Side Panel.
  • Instant Capture: Press the default global shortcut Command+Shift+F (macOS) or Ctrl+Shift+F (Windows) to instantly summon the quick capture popup.

2. Dual-Track Workspace Navigation

  • Quick Notes: Designed for jotting down spontaneous thoughts, meeting memos, code snippets, and daily checklists.
  • Structured Books: Built for comprehensive multi-chapter books, research papers, course curricula, or technical monographs.
  • Seamlessly switch between Notes and Books using the top navigation icons.

✍️ 2. Editor Modes & Typography

1. 4 Viewport Modes

  • Visual Mode: WYSIWYG rich text editing. Formats text, headings, task lists, and tables live under your cursor.
  • Split Mode: Synchronized split view with rich text on the left and raw Markdown source on the right.
  • Source Mode: Clean plain-text Markdown editing with automatic tag completion.
  • Preview Mode: Clean reader view with active, secure clickable hyperlinks.

2. Code Blocks & Syntax Highlighting

  • Type ``` to insert a code block.
  • The top-right toolbar provides a language selector and a one-click copy button, paired with unselectable line numbers on the left.

📐 3. Math Formulas & Mermaid Diagrams

1. KaTeX LaTeX Math

  • Inline Formulas: Type $E=mc^2$—the formula renders immediately when the cursor leaves the expression.
  • Block Formulas: Type $$ and press Enter, or click the formula icon in the toolbar.
  • The formula modal includes quick buttons for common Greek letters and operators with real-time preview.

2. Interactive Mermaid Diagram Suite

  • Select mermaid as the code block language, write diagram definitions, and watch them render dynamically.
  • Canvas Panning: Hover to switch to the grab cursor; click and drag to navigate wide diagrams; double-click anywhere to center and reset.
  • Full-Screen Lightbox: Click the zoom icon to open the 94vw × 88vh lightbox with 30%–350% stepless zooming.
  • High-Resolution Export: Export as vector SVG or 2x retina HD PNG with 24px padding and a solid white background.

🚀 4. Blog Direct in Practice: FlashNote as a Dedicated MagicNote Static Site Editor

FlashNote is not just a personal notebook—it is natively designed as the lightweight visual writing and publishing hub for modern technical blogs like MagicNote (customized on top of VitePress).

1. Why Blog Direct?

  • Farewell to Manual Overhead: Static blogs usually require command-line setups, manual file creation, error-prone YAML headers, and messy image copying.
  • Write Anywhere from the Sidebar: While browsing articles, reading documentation, or researching, open FlashNote to craft posts with rich text, Mermaid diagrams, and KaTeX math. One click compiles and delivers the content directly to MagicNote.

2. Enable Blog Direct on Specific Folders

  1. In FlashNote, go to Settings -> Folder & Category Management.
  2. Toggle [Blog Direct] on for folders you intend to publish publicly (e.g., tech, life, notes).
  3. Folders without Blog Direct enabled (such as private) remain completely isolated to prevent accidental publishing.

3. Automated FrontMatter & Advanced Attributes

Never write raw YAML headers by hand. FlashNote automatically injects standard metadata:

  • title & slug: Set an English or pinyin slug in the note properties to generate clean permalinks (e.g., posts/tech/modern-frontend-arch.md).
  • category & tags: Pick categories and tags in the UI; they link automatically with MagicNote’s category (/pages/category) and tag (/pages/tags) pages.
  • Sticky Priority (order): Set a numeric value greater than 0 (e.g., order: 9); MagicNote sorts these at the top of the homepage with a 📌 pin icon.
  • Lead Summary (description): Supports rich text and native Markdown syntax. Relative image paths are rewritten automatically, and repeat hero images in article bodies are avoided.

4. Companion Images & Mermaid Diagrams

  • Images inserted in FlashNote or exported Mermaid diagrams are placed in companion directories (e.g., posts/{folder}/{slug}/).
  • This honors MagicNote’s asset separation principles, avoiding pollution of the public/ directory while allowing VitePress asset pipelines to bundle them seamlessly.

5. Publishing & Continuous Delivery Workflow

  1. Local Export: Click the Blog Direct button in the header toolbar to package the current post or folder into a ZIP archive formatted for MagicNote’s posts/ folder.
  2. Cloud Sync: When combined with Baidu Netdisk sync, FlashNote directly writes posts into the synchronized posts/ hierarchy. Connected with Webhooks or CI/CD pipelines (e.g., Azure DevOps or GitHub Actions), changes trigger automatic builds and instantaneous deployments to production (e.g., blog.aicro.net).

☁️ 5. Chunked Cloud Sync

1. Binding & Authorization

  • Navigate to Settings -> Cloud Sync Settings and authorize your Baidu Netdisk account.
  • All synchronized data is strictly stored within your private /apps/flashnote/ directory.

2. Differential Chunked Uploads

  • The engine slices book chapters and performs SHA-256 fingerprint verification, uploading only modified sections.
  • Upon completion, the cloud automatically generates a consolidated ${safeBookName}.md ebook and a standard SUMMARY.md navigation file.

🌐 6. Global Web Clipper & Inspiration Capture

1. Context Menu Capture

  • While browsing any webpage, right-click to access FlashNote clipping options:
    • Clip Article Body: Intelligently extracts main article content while filtering out navbars, ads, and footers;
    • Clip Selection: Instantly grabs selected text and appends it to FlashNote;
    • Clip Link / Image: Grabs media or URLs directly into your workspace.

2. Lightweight Web Toast & Provenance

  • In-Page Floating Toast: A sleek, animated feedback pill appears in the top-right corner without requesting system OS notification permissions;
  • Source Citation: Automatically preserves original webpage titles and permalink URLs;
  • Auto-Open Sidepanel: When enabled in Settings, FlashNote smoothly slides open and highlights your new note upon capture.

🤖 7. AI Writing Assistant Configuration & Usage

1. LLM Engine Setup

Under Settings -> AI Assistant Settings, configure your preferred LLM backends:

  • Chrome Built-In AI (Gemini Nano): Fully offline execution with 0ms network latency and 100% on-device privacy;
  • Google Gemini API: Enter your Google AI Studio API key to access state-of-the-art models like Gemini 1.5 / 2.0 Flash;
  • Custom OpenAI-Compatible Endpoints: Connect to any custom model proxy or compliant third-party provider.

2. Floating AI Assistant Panel

  • Click the AI icon in the editor toolbar to reveal the floating assistant;
  • Draggable & Resizable: Drag by the header bar or resize from the bottom-right corner without obscuring editor content;
  • Turnkey Writing Prompts: Polishing, grammar corrections, multilingual academic translations, summaries, outline expansions, and custom prompts;
  • Direct Adoption: Insert generation results directly via Append, Replace Selection, or Copy to Clipboard.

📊 8. Product & Data Analytics Preferences (Google Analytics 4)

1. Anonymous Telemetry Overview

  • FlashNote incorporates Google Analytics 4 Measurement Protocol to measure launch performance, toolbar adoption, and general stability to guide future improvements;
  • Strictly Anonymized: Never monitors keystrokes or collects note text. Telemetry is restricted to bucketed timings and feature counters (Non-PII).

2. Complete User Control (Opt-Out)

  • Navigate to Settings -> Product & Data Analytics;
  • Uncheck the toggle “Enable Google Analytics 4 Anonymous Analytics” anytime;
  • When disabled, all telemetry transmissions stop immediately.

📬 9. Support & Feedback

If you have questions, feedback, or feature requests, feel free to reach out: