Anytime Markdown

日本語 | English

Code, docs, and AI — made visible.

AI agents are a caravan crossing the harsh terrain of development.
WYSIWYG Markdown editing with diff review, real-time TypeScript architecture visualization, and unified AI session management — three VS Code extensions that serve as your compass in the age of AI.

Visit the website

Or open the browser-based Markdown editor — no install, no sign-up. Syntax guides: Mermaid · PlantUML · KaTeX · Diff · Tables

Quick Start

Three ways in, from lightest to heaviest. Only the third one needs WSL2 and Docker — installing the extensions does not.

1. Try it in the browser

No install, no sign-up: the Markdown editor runs on the web.

2. Install the VS Code extensions

All seven at once, via the extension pack:

code --install-extension anytime-trial.anytime-extension-pack

Or pick individual ones:

Extension	What it does	Install
Anytime Markdown	WYSIWYG Markdown editor with live preview, diagrams, and diff review	code --install-extension anytime-trial.anytime-markdown
Anytime Trail	C4 / DSM architecture visualization and AI session dashboard	code --install-extension anytime-trial.anytime-trail
Anytime Agent	Status panels for Claude Code sessions and Ollama backends	code --install-extension anytime-trial.anytime-agent
Anytime Graph	Co-occurrence network editor	code --install-extension anytime-trial.anytime-graph
Anytime History	Git staging, commit graph, and timeline	code --install-extension anytime-trial.anytime-history
Anytime Sheet	Spreadsheet editor for .sheet, .csv, and .tsv	code --install-extension anytime-trial.anytime-sheet
Anytime Database	Browse and query SQLite databases	code --install-extension anytime-trial.anytime-database

3. Build from source

For contributors, and for running the web app locally — see Development Setup below. This is the only path that needs WSL2 and Docker.

Three VS Code Extensions

Anytime Trail — Visualize Structure, Quality, and Behavior

A VS Code extension that analyzes a TypeScript project with a single command and visualizes the codebase, AI behavior, and project quality in real time.
Code while inspecting structure in a live browser viewer.

• Structure visualization: Auto-generate C4 architecture diagrams and a DSM (Dependency Structure Matrix). Drill down across four levels (L1 System Context to L4 Code), with circular dependencies highlighted in red
• Behavior visualization: Visualize user input, AI responses, and tool executions turn by turn as a hierarchical tree. A conversation tree synced with the turn timeline traces what the AI agent decided, when, and why
• Quality visualization: Overlay error counts, retry rates, build/test failure rates, and coverage as a heatmap on the C4 diagram to locate weak spots within the structure
• Productivity visualization: Quantify AI agent ROI with token consumption, estimated cost, cache hit rate, and Four Keys (DORA) metrics

Install Anytime Trail · Details

Anytime Markdown — WYSIWYG Editing and Diff Review

A WYSIWYG Markdown editor built on Tiptap / ProseMirror.
The same editing experience across three platforms: Web, VS Code, and Android.

• Review AI's footprints: AI-edited sections are color-highlighted for instant section-level diff comparison. Lock finalized sections to prevent AI from re-editing them
• Instant 3-mode switching: Switch between WYSIWYG, Source, and Review modes with a single click. Review mode is read-only — perfect for focused review of AI output
• Diagram preview in-editor: Render Mermaid, PlantUML, and math (KaTeX) directly in the editor. No context switching needed
• Image annotation: Add rectangles, circles, lines, and text directly on images. Paste screen captures into Agent Note to share visual context with the AI
• Slash commands: Quickly insert headings, tables, code blocks, diagrams, and templates by typing "/"
• Git sidebar: Change list, commit graph, and timeline integrated in the sidebar
• Inline comments / outline / footnotes / automatic section numbering / find & replace
• Japanese / English support

Install Anytime Markdown · Details

Anytime Agent — Visualize and Hand Off AI Sessions

A VS Code extension that lists every Claude Code / Codex session across worktrees and branches, and hands off bloated sessions along with their context.
See the whole caravan without leaving VS Code.

• Agent mapping: List all Claude Code / Codex sessions ordered by recent activity. Inspect branch, worktree, and commit details on hover; sessions whose context tokens exceed the threshold get a handoff-recommended warning badge
• Session handoff: Migrate a bloated session to a new one along with a compacted summary of the work. Launch it in a terminal with one click, or copy the handoff document
• AI Note: Share images, tables, and free-form notes with AI tools that cannot see your screen. Notes are stored in the workspace under .anytime/notes/
• Bundled skills: Automatically install Claude Code skills such as anytime-note, anytime-cross-review, and anytime-dev-cycle into the workspace .claude/skills/
• Token budget: Configure daily and per-session token limits with an alert threshold

Install Anytime Agent · Details

MCP Servers

A set of MCP (Model Context Protocol) servers that give AI agents direct access to project assets.

Server	Capabilities
mcp-markdown	Read/write Markdown, section operations, diff computation
mcp-graph	Graph document CRUD, SVG / draw.io export
mcp-trail	C4 model and DSM operations; manage elements, groups, and relationships
mcp-cms	Document and report management on S3
mcp-cms-remote	Remote CMS access via Cloudflare Workers

Standalone Setup — Claude Desktop, Claude Code, Cursor

These servers are not published to npm. They run over stdio from a clone of this repository, so any MCP client can use them without installing the VS Code extensions. The Dev Container is not required — Node.js 24 (see .node-version) and one npm install at the repository root are enough.

git clone https://github.com/anytime-trial/anytime-markdown.git
cd anytime-markdown
npm install

Then register the servers you want with your client — claude_desktop_config.json for Claude Desktop, .mcp.json in the project root for Claude Code, mcp.json for Cursor. Replace /path/to/anytime-markdown with the absolute path of your clone, and /path/to/your/workspace with the project you want the server to act on. Those are usually two different directories: the clone supplies the server, the workspace supplies the data.

{
  "mcpServers": {
    "mcp-markdown": {
      "command": "npx",
      "args": ["tsx", "--tsconfig", "packages/mcp-markdown/tsconfig.json", "packages/mcp-markdown/src/stdio.ts"],
      "cwd": "/path/to/anytime-markdown",
      "env": { "ANYTIME_MARKDOWN_ROOT": "/path/to/your/workspace" }
    },
    "mcp-graph": {
      "command": "npx",
      "args": ["tsx", "packages/mcp-graph/src/stdio.ts"],
      "cwd": "/path/to/anytime-markdown"
    },
    "mcp-trail": {
      "command": "npx",
      "args": ["tsx", "packages/mcp-trail/src/stdio.ts"],
      "cwd": "/path/to/anytime-markdown",
      "env": { "TRAIL_WORKSPACE_PATH": "/path/to/your/workspace" }
    },
    "mcp-cms": {
      "command": "npx",
      "args": ["tsx", "--require", "dotenv/config", "packages/mcp-cms/src/stdio.ts"],
      "cwd": "/path/to/anytime-markdown",
      "env": { "DOTENV_CONFIG_PATH": "/path/to/your/.env" }
    }
  }
}

Every variable below is optional. The table gives the fallback each server uses when one is unset.

Server	Variable	Falls back to	Purpose
mcp-markdown	ANYTIME_MARKDOWN_ROOT	process.cwd()	Workspace root the server reads and writes Markdown under
mcp-markdown	ANYTIME_MARKDOWN_DOC_DB	<root>/.anytime/markdown/catalog.db	Document search index. search_docs needs it; build it from the Anytime Markdown extension ("Rebuild Doc Search Index")
mcp-trail	TRAIL_WORKSPACE_PATH	process.cwd(), with a warning on stderr	Workspace whose databases the tools read. Most tools also take workspacePath per call, which wins over the variable
mcp-trail	TRAIL_HOME	<workspace>/.anytime/trail	Directory holding the Trail databases
mcp-trail	TRAIL_REPO_NAME	the single repository recorded in the database, else the workspace directory name	Disambiguates when the database holds several repositories
mcp-cms	DOTENV_CONFIG_PATH	—	Path to the .env carrying the S3 credentials, used together with --require dotenv/config
mcp-cms	GOOGLE_SERVICE_ACCOUNT_KEY_PATH	—	Enables read_google_doc. When unset, that one tool is simply not registered

Two servers depend on data produced elsewhere. mcp-trail reads the SQLite databases the Anytime Trail extension writes under .anytime/trail/db/; if that extension has never analyzed the workspace, its tools return empty results rather than an error, so install and run the extension first if you want real data. mcp-cms starts without credentials but every tool call fails until the S3 configuration is in place.

See SECURITY.md for what these servers read from your machine.

Project Structure

flowchart TD
    subgraph core ["Shared Libraries"]
        MV["markdown-editor<br/>(Editor foundation)"]
        MR["markdown-rich-editor<br/>(Diagram rendering · derived)"]
        GC["graph-core<br/>(Graph engine)"]
        TC["trail-activity<br/>(TypeScript analysis · C4 · DSM)"]
        CC["cms-core<br/>(S3 client)"]
        AC["agent-core<br/>(AI session state)"]
        SC["spreadsheet-core<br/>trace-core"]
        DC["database-core<br/>(SQLite access)"]
    end

    subgraph vendor ["Vendored"]
        MC["markdown-core<br/>(vendored tiptap)"]
    end

    subgraph viewer ["Viewers (Web Embed)"]
        TV["trail-viewer"]
        GV["graph-viewer"]
        SV["spreadsheet-viewer"]
        CV["cooccurrence-viewer"]
        DV["database-viewer"]
    end

    subgraph app ["Applications"]
        WA["web-app<br/>(Next.js · also builds the Capacitor Android app)"]
    end

    subgraph ext ["VS Code Extensions"]
        VME["vscode-markdown-extension"]
        VTE["vscode-trail-extension"]
        VAE["vscode-agent-extension"]
        VGE["vscode-graph-extension"]
        VDE["vscode-database-extension"]
        VSE["vscode-sheet-extension<br/>vscode-history-extension"]
        VEP["vscode-extension-pack"]
    end

    subgraph mcp ["MCP Servers"]
        MM["mcp-markdown"]
        MG["mcp-graph"]
        MT["mcp-trail"]
        MCM["mcp-cms<br/>mcp-cms-remote"]
    end

    MR --> MV
    MV --> MC
    TV --> TC
    GV --> GC
    SV --> SC
    CV --> GC
    DV --> DC
    WA --> MR
    WA --> MV
    WA --> TV
    WA --> GV
    WA --> CV
    WA --> CC
    VME --> MR
    VME --> MV
    VGE --> GC
    VGE --> CV
    VTE --> TC
    VTE --> TV
    VAE --> AC
    VDE --> DV
    VDE --> TC
    VSE --> SV
    MM --> MV
    MG --> GC
    MT --> TC
    MCM --> CC

Arrows reflect the internal dependencies (@anytime-markdown/*) declared in each package.json. The one exception is vscode-trail-extension → trail-viewer, which is a webpack bundling dependency and does not appear in package.json.

The markdown-* packages

Seven packages share the markdown- prefix. markdown-editor is the foundation; markdown-rich-editor is derived from it by adding diagram rendering — not the other way around. Because the names are similar, the table below states each package's scope and the direction of its dependencies explicitly.

Package	Role	Internal dependency
markdown-editor	Editor foundation. TipTap extension assembly, mount API, vanilla UI, i18n, file system abstraction. Does not include diagram rendering	markdown-core
markdown-rich-editor	markdown-editor plus mermaid / katex / plantuml / plotly / jsxgraph rendering. Isolates the heavy dependencies here so the foundation stays lean	markdown-editor
markdown-core	Vendored tiptap. Not first-party code; consumed through bundler and tsconfig aliases	none
markdown-engine	Markdown text processing (formatting, diff, section parsing, sanitization). Independent of the editor	none
markdown-react-islands	React wrappers for web-app. The editor itself is React-free; React is isolated to this package	markdown-editor
markdown-view	Published wrapper registering <anytime-markdown-view> (with diagrams)	markdown-rich-editor
markdown-view-lite	Published wrapper registering <anytime-markdown-view> (without diagrams)	markdown-editor

Three Web Components are distributed. All three expose the same attribute, property, and event interface.

Tag	Registered by	Diagrams	Editing
<anytime-markdown-editor>	markdown-editor/element	no	yes
<anytime-markdown-rich-editor>	markdown-rich-editor/element	yes	yes
<anytime-markdown-view>	markdown-rich-editor or markdown-view-lite	depends on which	no (read-only)

<anytime-markdown-view> has lean and diagram-bundled twins under the same tag; the import you choose determines its rendering capability. If both are loaded on one page, whichever registers first wins.

Prerequisites

• WSL2 (on Windows)
• Docker Desktop (WSL2 backend)
• VS Code + Dev Containers extension
• Android Studio (if building the Android app)

Development Setup

Using Dev Container (Recommended)

1. Clone the repository on WSL2
2. Open the repository in VS Code
3. Command Palette -> "Dev Containers: Reopen in Container"

On first run, the container build and npm install run automatically.
Port 3000 is auto-forwarded.

# Start the development server
cd packages/web-app
npm run dev

Open http://localhost:3000 in your browser.

Using Docker Manually

# 1. Build and start the container
docker compose up -d

# 2. Enter the container
docker compose exec anytime-markdown bash

# 3. Install dependencies
npm install

# 4. Start the development server
cd packages/web-app
npm run dev

Open http://localhost:3000 in your browser.

Security

Found a vulnerability? Report it privately — see SECURITY.md for the reporting channel, the supported versions, and what is in scope. Please do not open a public issue for security problems.