Quartz-Mindmap

• It’s a custom plugin that enables mindmap in Quartz 4.
  • built using markmap.
• demo
  • cmd / ctrl + m
  • click button
• The mindmap is built from Markdown headings and lists.

Supported Features

• Popover
• Mermaid
• Callout
• Toolbar
• Button mode
• Preview mode
• Portal mode
• Support for various file formats
  • image png|jpg|jpeg|gif|bmp|svg|webp
  • chrome
    • video mp4|webm|ogv|avi|mov|flv|wmv|mkv|mpg|mpeg|m4v
    • audio mp3|wav|m4a|ogg|3gp|flac
    • iframe pdf
    • youtube link
  • safari
    • Partial support video, audio, iframe, youtube

Installation

• You must complete all of the following steps for it to work.

1. Install required packages

npm i markmap-lib markmap-view markmap-toolbar he @types/he

2. Add files

• mindmap.ts -> quartz/plugins/transformers/
• Mindmap.tsx -> quartz/components/
• mindmap.inline.ts -> quartz/components/scripts/
• mindmap.scss -> quartz/components/styles/

3. Edit quartz/components/index.ts

importMindmapfrom'./Mindmap'export{
...,Mindmap}

4. Edit quartz/plugins/transformers/index.ts

export{Mindmap}from"./mindmap"

5. Edit quartz/plugins/transformers/links.ts

• Add export before interface Options and const defaultOptions

17exportinterfaceOptions{
...
}27exportconstdefaultOptions: Options={
...
}

6. Edit quartz/plugins/transformers/ofm.ts

• add export before function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {

104exportfunctioncanonicalizeCallout(calloutName: string): keyoftypeofcalloutMapping{

7. Edit quartz/components/scripts/popover.inline.ts

• Add this at the end of the file

export{mouseEnterHandler,clearActivePopover}

8. Replace i18n (option)

• quartz/components/Mindmap.tsx
• If using i18n

130<h3>{i18n(cfg.locale).components.mindmap.title}</h3>// by replacing the i18n

9. Edit quartz.config.ts

• Add the transformer
• (!) The options must be the same as those of CrawlLinks.

 plugins:{
...
transformers: {
...
Plugin.Mindmap({markdownLinkResolution: "shortest",// Must match CrawlLinks option}),}}

10. Edit quartz.layout.ts

• Use one of three mode options: view, button, or global.

Component.Mindmap({mode: "view"|"button"|"global",// choose onelocalOptions: {},globalOptions: {},// for global mode}),

• global
  • acts as a portal to open the mindmap, must be added only once to sharedPageComponents
• view(default)
  • similar to the graph plugin’s inline view
• button
  • appears like a dark mode toggle button.
  • opens the mindmap when clicked.

exportconstsharedPageComponents: SharedLayout={afterBody: [
...,Component.Mindmap(),// view modeComponent.Mindmap({mode: "global",// global portalglobalOptions: {},// globalOptions}),]}exportconstdefaultContentPageLayout: PageLayout={// or export const defaultListPageLayout: PageLayout = {left: [Component.Flex({components:[
...,{Component: Component.Mindmap({mode: "button",localOptions: {}})},]})]}

Options

• markmap options
• localOptions default

  {// json optionscolorFreezeLevel: 2,duration: 500,maxWidth: 0,initialExpandLevel: -1,zoom: true,pan: true,spacingHorizontal: 80,spacingVertical: 5,// https://markmap.js.org/api/interfaces/markmap-view.IMarkmapOptions.htmlscrollForPan: false,// toolbar on|offzoomInIcon: true,zoomOutIcon: true,resetIcon: true,recurseIcon: false,}

• globalOptions default

  {// json optionscolorFreezeLevel: 2,duration: 500,maxWidth: 0,initialExpandLevel: -1,zoom: true,pan: true,spacingHorizontal: 80,spacingVertical: 7,// https://markmap.js.org/api/interfaces/markmap-view.IMarkmapOptions.htmlscrollForPan: false,// toolbar on|offzoomInIcon: true,zoomOutIcon: true,resetIcon: true,recurseIcon: true,//only globalexpandIcon: true,closeIcon: true,}

Done!

• Enjoy the Mind Map!