Pocket Blocks Render

Render Pocket timelines, charts, flowcharts and decision trees inside Obsidian notes. The plugin works offline: Chart.js is included in the release.

Created by César Gómez (temperatio) and published by Dos2Locos. Contact: [email protected].

Features

• Timelines with a stage, title and description.
• Bar and line charts, plus doughnut-style pie charts.
• SVG flowcharts with labeled arrows, zoom, panning and full-screen controls where supported.
• Decision trees with nested indentation or named nodes, descriptions and shared destinations.
• Cycle-aware flowcharts and decision graphs with return arrows.
• Readable tables or plain text for unknown Pocket block types.
• Surrounding Markdown links and formatting stay intact.

The renderer processes visible <pocket:TYPE>...</pocket:TYPE> text in Reading view and Markdown preview surfaces. It does not provide a dedicated Live Preview editor extension. Source mode retains the original text. Full-screen availability depends on your device; diagrams use a deterministic layered layout with separate return paths for cycles.

Install

Until accepted into the Obsidian Community directory, install from GitHub Releases:

1. Create .obsidian/plugins/pocket-blocks-render inside your vault.
2. Download main.js, manifest.json and styles.css into that folder.
3. Reload Obsidian and enable Pocket Blocks Render in Community plugins.

Use Obsidian 1.4.0 or newer. The plugin uses browser APIs and is marked for desktop and mobile. Android hardware testing of this release is still pending.

Examples

Use the following visible block text, for example inside a text code fence in a note. See examples/demo.md for a complete sample.

<pocket:timeline title="Release plan">
Today | Prepare | Review the release
Tomorrow | Publish | Share the download
</pocket:timeline>

<pocket:chart type="bar" title="Tasks completed">
Planning | 8 | #007AFF
Writing | 5 | #34C759
Review | 3 | #AF52DE
</pocket:chart>

<pocket:flowchart title="Review process">
Draft ->|Ready| Review
Review -> Publish
</pocket:flowchart>

<pocket:decision-tree title="Publish decision">
Ready?
- Yes => Reviewed?
  - Yes => Publish
  - No => Review first
- No => Keep drafting
</pocket:decision-tree>

Decision trees accept decision-tree, decisiontree and tree. Indent - Label => Target branches with spaces or tabs to nest questions.

pie and doughnut both display as a ring, matching the original renderer. Invalid or non-finite numbers become zero; decimal commas are accepted. Unknown block types fall back to tables when their rows contain pipes, otherwise plain text. Quoted attributes and row contents are treated as text, never executable HTML.

Named decision nodes

Use id::Title to define a node, add a description on following lines, and point branches to its ID. IDs can contain spaces. Definitions can appear after their references. Several branches can share the same node, and cycles are drawn as return arrows. Targets without a definition are displayed as literal outcomes. The existing indented syntax remains supported.

<pocket:decision-tree title="Release decision">
start::Ready?
Check the draft before publishing.
- Yes => review
- No => revise

review::Reviewed?
- Yes => publish
- No => revise

revise::Revise
Resolve the remaining comments.

publish::Publish
Share the completed work.
</pocket:decision-tree>

Invalid or empty chart colors use the default palette. Supported hexadecimal, named, RGB and HSL colors are preserved.

Privacy and dependencies

No account, API key, payment or network access is required by this renderer. It reads rendered note content and changes its displayed representation; it does not edit your note files, access files outside the vault, send telemetry or download runtime code. It does not sync or import Pocket data. Any separate Pocket service or sync plugin has its own requirements and policies.

Chart.js 4.4.1 and its color dependency are bundled locally under their MIT licenses. See THIRD_PARTY_NOTICES.md. This project is independently maintained and is not an official Pocket or Obsidian product.

Development

npm ci
npm run lint
npm test
npm run build

Source: src/main.ts. The build creates main.js; TypeScript strict checking is enabled. The regression suite covers rendering, preservation of adjacent Markdown, text escaping, chart lifecycle and fallback behavior using a mocked Obsidian host and chart constructor.

Releases

Update package.json, manifest.json and versions.json together. Create an exact x.y.z Git tag matching the manifest. Run the checks above, then attach main.js, manifest.json and styles.css to that GitHub release. Run validation before each release; publishing a release is an explicit maintainer action.

License

MIT. Copyright © 2026 César Gómez. Bundled third-party copyrights remain with their respective authors.