- 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.
- 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
- video
- safari
- Partial support video, audio, iframe, youtube
- image
- You must complete all of the following steps for it to work.
npm i markmap-lib markmap-view markmap-toolbar he @types/hemindmap.ts->quartz/plugins/transformers/Mindmap.tsx->quartz/components/mindmap.inline.ts->quartz/components/scripts/mindmap.scss->quartz/components/styles/
import Mindmap from './Mindmap'
export{
...,
Mindmap
}export { Mindmap } from "./mindmap"- Add
exportbeforeinterface Optionsandconst defaultOptions
17 export interface Options {
...
}
27 export const defaultOptions: Options = {
...
}- add
exportbeforefunction canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {
104 export function canonicalizeCallout(calloutName: string): keyof typeof calloutMapping {- Add this at the end of the file
export { mouseEnterHandler, clearActivePopover }quartz/components/Mindmap.tsx- If using i18n
130 <h3>{i18n(cfg.locale).components.mindmap.title}</h3> // by replacing the i18n- Add the transformer
- (!) The options must be the same as those of CrawlLinks.
plugins:{
...
transformers: {
...
Plugin.Mindmap({
markdownLinkResolution: "shortest", // Must match CrawlLinks option
}),
}
}- Use one of three mode options: view, button, or global.
Component.Mindmap({
mode: "view" | "button" | "global", // choose one
localOptions: {},
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.
export const sharedPageComponents: SharedLayout = {
afterBody: [
...,
Component.Mindmap(), // view mode
Component.Mindmap({
mode: "global", // global portal
globalOptions: {}, // globalOptions
}),
]
}
export const defaultContentPageLayout: PageLayout = {
// or export const defaultListPageLayout: PageLayout = {
left: [
Component.Flex({
components:[
...,
{ Component: Component.Mindmap({ mode: "button", localOptions: {}}) },
]
})
]
}- markmap options
localOptionsdefault{ // json options colorFreezeLevel: 2, duration: 500, maxWidth: 0, initialExpandLevel: -1, zoom: true, pan: true, spacingHorizontal: 80, spacingVertical: 5, // https://markmap.js.org/api/interfaces/markmap-view.IMarkmapOptions.html scrollForPan: false, // toolbar on|off zoomInIcon: true, zoomOutIcon: true, resetIcon: true, recurseIcon: false, }
globalOptionsdefault{ // json options colorFreezeLevel: 2, duration: 500, maxWidth: 0, initialExpandLevel: -1, zoom: true, pan: true, spacingHorizontal: 80, spacingVertical: 7, // https://markmap.js.org/api/interfaces/markmap-view.IMarkmapOptions.html scrollForPan: false, // toolbar on|off zoomInIcon: true, zoomOutIcon: true, resetIcon: true, recurseIcon: true, //only global expandIcon: true, closeIcon: true, }
- Enjoy the Mind Map!