LTT Canvas documentation

Version 0.3.1 · All documentation · Product page

LTT Canvas shows Obsidian Canvas boards and XMind mind maps on WordPress pages, and lets Administrators and Editors create and edit maps in the WordPress admin. There is no settings page: display options live on each map.

Requirements

  • WordPress 6.0 or newer, PHP 7.4 or newer.
  • The PHP Zip extension, only for importing .zip and .xmind files.
  • Imports are limited by the server upload size shown on the Import page.
  • Administrators and Editors can create and edit maps.
  • Current Chrome, Edge, Firefox or Safari; phones and tablets for viewing.

Install, update, remove

  1. Plugins → Add Plugin → Upload Plugin, choose ltt-canvas-0.3.1.zip, Install Now, Activate Plugin.
  2. The admin menu now has LTT Canvas with All maps, Add map and Import.

Update: upload the new zip the same way and click Replace current with uploaded. Maps, drafts, versions, notes, linked files and display settings are kept.

Remove: deactivating or deleting keeps your maps. To erase them, add define( 'LTTC_DELETE_DATA', true ); to wp-config.php before deleting. Media Library files and posts created from cards are never deleted.

Quick start

  1. LTT Canvas → Add map. The editor starts with a central topic.
  2. Press Tab to add a child card and Enter to add a sibling. Type to fill in the text.
  3. Click Publish.
  4. Add the Canvas map block to a page and pick the map, or paste the shortcode from the map screen.

Import from Obsidian and XMind

FileWhat happens
.canvasOne Obsidian board. Images and notes it references are not inside the file; link them afterwards in “Files used in the map”
.zipAn Obsidian folder or a whole vault. Every board becomes a map; images, videos, audio and PDFs go to the Media Library; referenced notes are stored with the map
.xmindXMind 8 and newer. Every sheet becomes a separate map; images go to the Media Library
  1. LTT Canvas → Import.
  2. Click Choose files and select one or more files.
  3. Choose whether new maps are Published or Drafts, then click Import.
  4. You return to All maps with one message per map. Files that were referenced but missing are listed and show a placeholder.

To link a missing file, open the map, find it in Files used in the map, click Choose from Media Library, then Update. To replace an existing map with a new export, use the Import from Obsidian or XMind box on the map screen; the previous board goes to Versions.

What comes over from XMind

  • Topics and branches, with branch colours in XMind order.
  • Notes, labels, links, images, relationships (dashed arrows), floating topics and summaries.
  • Markers such as priorities, progress and flags, shown as emoji.
  • Not imported: boundaries, themes, custom styles, equations and attachments.
  • XMind does not save positions, so the plugin lays the map out again. Move cards where you want them; positions are kept.

The map editor

Toolbar buttonWhat it does
Add cardNew text card (also: double-click empty space)
Add image or filePick from the Media Library
Add link or videoA URL; YouTube, Vimeo and Rutube play inside the card
Group selected cardsFrame the selection with a name
Auto layoutTab, Enter and edits keep the tree tidy like XMind; turn off for a free canvas
Undo / RedoUp to 100 steps
Colour circlesNo colour, 6 presets or any colour
NoteMarkdown note on the selected card
Turn into a postCreate a post or page from a text card
Arrange branch like a mind mapTidy everything under the selected card once
  • Drag a card to move it (10 px grid; hold Alt for free movement). Shift+click or Shift+drag selects several.
  • Hover a card to see four side dots; drag a dot to another card to connect, or to empty space to create a connected card.
  • Click a line to select it; double-click it to edit the label. Arrows can be none, one or both.
  • Cards made with Tab and Enter fit their text. Resize with the corner square; a resized card keeps its size.
  • Card text is Markdown: headings, lists, tables, task lists, ==highlight==, #tags and callouts like > [!tip].

Keyboard shortcuts

KeyAction
TabNew child card
EnterNew sibling card; while editing: finish
Type a letter / F2 / SpaceEdit the card (a letter replaces the text, F2 and Space keep it)
Shift+EnterNew line while editing
EscFinish editing, close panels, clear selection
Arrow keysMove between cards
Delete / BackspaceDelete the selection
Ctrl/Cmd+Z, Ctrl/Cmd+Shift+ZUndo, redo
Ctrl/Cmd+C, X, V, DCopy, cut, paste, duplicate (works across maps)
Ctrl/Cmd+GGroup the selection
Ctrl/Cmd+SSave the draft now
Alt+NNote of the selected card
+ / – / 0Zoom in, zoom out, show the whole map
FFull screen (when no card is selected)

Press ? in the toolbar for the full list.

Notes and post cards

Notes. Select a card and press Alt+N. Type Markdown in the panel; it saves with the map. The card shows a small note icon, and visitors click it to read the card and its note.

Turn a card into a post. Select a text card, click Turn into a post, check the title, choose Post or Page and Save as draft or Publish now. The card becomes a post card that always shows the current version of the post. Use the whole post / excerpt toggle for a short card. Visitors never see unpublished, private or password-protected posts.

Publishing and versions

  • Every change is saved as a draft 1.5 seconds later. Visitors keep seeing the published map until you click Update.
  • The Versions box keeps the last 10 published versions. Open one to load it into the editor, then Update to publish it.
  • If saving fails, the editor retries every 5 seconds. One person edits a map at a time, like a post.
  • Download any map as a .canvas file from the map sidebar or the map list; it opens in Obsidian.

Show a map on your site

  • Block: Canvas map (search “canvas”, “mind map”, “xmind” or “obsidian”). Pick the map, height and colours. Wide and full alignment work.
  • Shortcode: or , with optional height="70vh" and theme="dark" (auto, light, dark).
  • Map page: every published map has its own page at /map/slug/, with the excerpt above the map.
Display settingDefaultMeaning
Height600px600, 600px, 70vh, 40em, 30rem or 100%
ColorsFollow the visitor’s systemOr always light, always dark
Dotted backgroundOnDot grid behind the cards
Zoom and full screen buttonsOn+, -, Fit to screen, Full screen, zoom %

Scripts load only on pages that show a map, and nothing comes from outside CDNs. Publishing a map clears the LiteSpeed Cache of every page that shows it; other cache plugins can use the lttc_map_published action. Each map carries a hidden text version of its cards for search engines and screen readers. Change the map font with the CSS variable --lttc-font.

What visitors can do

ActionResult
DragMove the map
Ctrl/Cmd + wheel, pinchZoom from 4% to 400%
Wheel without CtrlScrolls the page, with a hint how to zoom
Double-clickZoom into a card or in; Shift+double-click zooms out
Full screenWheel moves the map; on iPhone the map covers the window
PhoneOne finger scrolls the page; two fingers move and zoom; in full screen one finger moves the map
Note icon, Read buttonOpen a card with its note or its full text

Troubleshooting

SymptomWhat to do
“File not available” on a cardLink the file in Files used in the map and click Update, or import a .zip of the folder with its images
“… was not uploaded. It may be larger than the server allows.”Zip only the folder you need, or ask your host to raise upload_max_filesize and post_max_size
“… contains no .canvas or .xmind files.”Zip the folder that contains the .canvas file
“The XMind file cannot be opened” / “The zip file cannot be opened”The PHP Zip extension is missing or the file is damaged
Visitors do not see my changesClick Update; changes are a draft until then. Clear other page caches by hand
Typing replaced the card textTyping a letter replaces it, like XMind. Press Ctrl/Cmd+Z, or use F2 or Space to keep the text
Cards moved when I pressed TabAuto layout is on. Turn it off for a free canvas
The wheel scrolls the pageUse Ctrl/Cmd + wheel, or open full screen
The map is empty on the siteThe map is not published, has no published board yet, or the shortcode ID is wrong
A post card shows only the titleThe post is unpublished, private or has a password

FAQ

Can I import my Obsidian canvas with its images?

Yes. Zip the folder with the .canvas file and its images, or the whole vault, and import the .zip.

Where do I find the map ID?

In the Shortcode column of LTT Canvas → All maps, or in the Show on your site box of the map.

Can I export a map back to Obsidian?

Yes: Download .canvas in the map sidebar or the map list. Images are referenced by their paths.

How do I stop cards moving when I press Tab?

Turn off Auto layout in the toolbar.

Can a card become a blog post?

Yes: select a text card, click Turn into a post, choose Post or Page and draft or publish. The card always shows the current post.

I made a mistake. Can I go back?

Use Ctrl/Cmd+Z, or open an earlier version in the Versions box and click Update.

Can the map be dark?

Yes: Colors → Always dark, the block Colors setting, or theme=”dark” in the shortcode.

Does it slow down other pages?

No. Its scripts load only where a map is shown.

What happens to my maps if I delete the plugin?

They are kept unless LTTC_DELETE_DATA is defined in wp-config.php.

Which languages are included?

English and Russian.

Still need help?

Write to info@lesst3.com or use the Support page. Include your WordPress and PHP versions and what you see on the screen; a screenshot helps.