Build mindmaps with plain text
Home Page: https://markmap.js.org/
License: MIT License
Visualize your Markdown as mindmaps.
This project is heavily inspired by dundalek's markmap.
👉 Try it out.
Markmap is also available in:
- powered by coc.nvim👉 Read the documentation for more detail.
# Foo
## Bar
---
## Baz
#### Quux
Results in:
(node:20389) UnhandledPromiseRejectionWarning: TypeError: token.children is not iterable
at extractInline (/home/roger/.nvm/versions/node/v12.16.1/lib/node_modules/markmap-lib/dist/index.js:29:29)
at buildTree (/home/roger/.nvm/versions/node/v12.16.1/lib/node_modules/markmap-lib/dist/index.js:202:25)
at transform (/home/roger/.nvm/versions/node/v12.16.1/lib/node_modules/markmap-lib/dist/index.js:212:14)
at createMarkmap (/home/roger/.nvm/versions/node/v12.16.1/lib/node_modules/markmap-lib/dist/index.js:241:16)
(node:20389) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:20389) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Markdown source file:
# Time Schemes
## Implicit Time Schemes
### BDF
### Comparative Study
- `YuMeilin-2019arXiv-CompareRosenbrock_ESDIRK_BDF`
## Multigrid Methods
Html output:
YuMeilin-2019arXiv-CompareRosenbrock_ESDIRK_BDF is omitted in the html file.
markmap-lib version:
$ markmap --version
0.4.2
Hi! Really cool tool. Is there any support for non-liner references? For example when a grandchild of A has a connection to a child of B, or an item is connected to multiple parents? Basically, drawing a connection between two nodes that are not in the same branch.
# Goals
## Open new branch
- Close property deal
- Hire additional team members [connects to Secure new investment]
## Secure new investment
- Prepare business plan
- Find investorsI was working with inline math formulas. It seems that when dealing with formulas whose 'd' is high, the em tag might untimely occurs, causing a chaos in the following few lines.
my note and generated html are here:
https://ym-ma.github.io/markdown.md
https://ym-ma.github.io/markdown.html
I inserted codes into the generated html file to enalbe inline math:
<script src="https://ym-notes.oss-cn-beijing.aliyuncs.com/img/load-mathjax.js" async></script>
When I use the markmap to read gist from github, from the console of Chrome, I get a 403 error code, which said it is a rate limit error. It happens sometime, not always.
Feature request.
Maybe some can contribute a vue component wrapper so I can use markmap-lib in my vuepress blog.Thanks.
YAML can be more useful than Markdown for mindmaps.
I can't figure out how to get markmap running locally in the browser. So I have something like https://markmap.js.org/repl on my machine. The project you got inspired from an instruction with examples are available: https://github.com/dundalek/markmap#browser
Can you add something like this, please?
that is the result after i typing markmap test.md and i am sure that the md file is correct.
(node:528) UnhandledPromiseRejectionWarning: TypeError: processors is not iterable at getParams (C:\Users\cmw天下第一\AppData\Roaming\npm\node_modules\markmap-lib\dist\template.js:37:23) at C:\Users\cmw天下第一\AppData\Roaming\npm\node_modules\markmap-lib\dist\util\loader.js:130:116 at Array.map (<anonymous>) at persistJS (C:\Users\cmw天下第一\AppData\Roaming\npm\node_modules\markmap-lib\dist\util\loader.js:122:16) at fillTemplate (C:\Users\cmw天下第一\AppData\Roaming\npm\node_modules\markmap-lib\dist\template.js:24:79) at createMarkmap (C:\Users\cmw天下第一\AppData\Roaming\npm\node_modules\markmap-lib\dist\index.js:38:43) (node:528) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:528) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
A few days ago I was able to export the mindmap as SVG on the 'Try Markmap' Website:
https://markmap.js.org/repl
Was this feature removed? Because now it is only possible to export as interactive website.
We would like to add CSS so we can customize the UI. E. g. like https://codepen.io/atraining/full/ExKgmbM
Example
<style>
#mindmap {
width: 100vw;
height: 100vh;
}
#mindmap path {
stroke: black;
}
#mindmap circle {
stroke: #44b78b;
}
#mindmap circle {
fill: #44b78b;
}
#mindmap rect {
fill: black;
}
</style>
# dddd
## fruits
- fff
## ffff
- banana
- dddd
- mango
- melon
- orange
# fff
- f
Hi, the following markdown has buggy layout.
Hi,
I am trying to use Markmap in a browser app. If I have a .md file, is it possible to pass the file to the transform or does the file need to be parsed and then passed as a string to the transform?
import { transform } from 'markmap-lib/dist/transform.common';
const data = transform(markdown);
Just like mermaid, I can simplily use it in html by code like this.
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/8.8.2/mermaid.min.js"></script>
</head>
<div class="mermaid">
graph TD
Start --> Stop
</div>Would be great if https://markmap.js.org/repl/ could have permalinks like https://excalidraw.com/, https://prettier.io/playground/ or https://www.typescriptlang.org/play/.
Awesome project BTW!
I'm not sure since when this feature is broken but the repl on the website isn't working anymore (tested with current Firefox and Chrome). There is no sample that is shown up and no text can be typed into the box.
And by the way:
The link "New feature: load markmap from Gist!" is giving me a 404.
Hi, @gera2ld . Markmap-lib is very awesome. I love it. Thank you for developing such a software.
When I used it to render my lecture notes(4050 words), the extended mindmap was in a mess. It was difficult for me to read it.
I hope there will be buttons to extend and collapse different levels of nodes like baidu naotu.
Hello!
I love this tool!
Is there anyway to add a flag at runtime to render the map with all the branches collapsed by default? My maps launch with all branches expanded and they are rather large - is there anyway to flag --collapsed or something so the map starts with only root and all branches collapsed by default?
When running markmap -w <input> I get the following error:
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'chokidar'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/Users/galstep/.nvm/versions/node/v10.21.0/lib/node_modules/markmap-lib/dist/dev-server.js:20:40)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
Markmap installed as global npm module
I found markmap for VSCode, and it's great. I found that it causes the problems, if the number of levels is greater than 9. I use it to draw a diagram for multi-level unordered lists, and it is more than 10 levels deep, that's why I found it.
An example (renders properly):
Add level 10, and it renders with problems:
My question / request is between #14 and #32, but I want to tell the renderer to collapse nodes from my JS code in client side, instead of Markdown or a separate UI button.
Actually, I solved this for myself, setting the f property at every node before providing the data to the renderer (see the code below), but I think a global option would be nice at the transform or the render.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<svg id="mindmap" width="700" height="500"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@5"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/view.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/transform.min.js"></script>
<pre id="mm" hidden>
# foobar
## foo
- f
- o
- o
## bar
- b
- a
- r
</pre>
<script>
function rec(data) {
data.p = {f: true};
for (var i in data.c) {
rec(data.c[i]);
}
}
markdown = document.getElementById("mm").innerHTML;
const data = markmap.transform(markdown);
rec(data);
markmap.Markmap.create("#mindmap", null, data);
</script>
</body>
</html>Such as 
The positioning of the rendered MathJax is off.
System: macOS 10.15.4
Browser: 13.1 (15609.1.20.111.8)
Hello, @gera2ld . Could you add options to keep markmap-lib rendering markdown file in the background?
When I write a markdown document and use markmap-lib to render it, I need to execute markmap myfile.md regularly to refresh the mindmap. It is kind of inconvenient.
I hope there will be option like --keep to keep markmap-lib running in the background to refresh the file. After using markmap-lib, use --quit to stop markmap-lib running in the background. It would be better if markmap can automatically quit after I close the html file and markdown file.
Markdown file as follows,
# Separation
## Backward-facing Step
- Snoi_2017AIAAJ_TurbulentSupersonicBackwardFacingStep
- OpenFOAM LES using an equilibrium wall model with $y^+=20$, 2nd order scheme, BDF2 with CFL<0.5.
Relatively good match with the experimental data.
Also do POD.
I do not think this is a good paper.
- $y^+=20$
Using the command markmap --no-open --enable-mathjax Separation_MindMap.md, it gives the following output, resulting in no MathJax rendered.
My markmap version is
$ markmap --version
0.6.0
Hi! Thank you for providing this fantastic program which did help me a lot on my study.
When I'm writing with markdown, I unconciously use those grammars to make my file look neater. Like using html label <font> to change face, color and size to emphasis the important. And also sometimes I need to add some graphs for easier understanding using .
I'm wondering if it is possible to support those features. If so, it would be great and powerful.
Thanks again for your contribution!
Hi, when markmap file.md is executed the system reports this error:
(node:15195) UnhandledPromiseRejectionWarning: TypeError: token.children is not iterable
at extractInline (/usr/lib/node_modules/markmap-lib/dist/index.js:29:29)
at buildTree (/usr/lib/node_modules/markmap-lib/dist/index.js:202:25)
at transform (/usr/lib/node_modules/markmap-lib/dist/index.js:212:14)
at createMarkmap (/usr/lib/node_modules/markmap-lib/dist/index.js:241:16)
(node:15195) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:15195) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Can you fit any idea to fix it?
Regards and thank you for this tool, we look forward to using it.
Currently the type looks like this:
export interface ITransformResult {
root: INode;
features: any;
}
As any is a undesired type (or lack thereof) I'd like to change this.
Looking at the usage of features in
https://github.com/gera2ld/markmap/blob/e944308c2272288ec5273098fb9de92001cab948/packages/markmap-lib/src/transform.ts#L175
the type of features seems to be { [key: string]: boolean; }.
So a solution could be to just do the following:
export interface IFeatures { [key: string]: boolean; }
export interface ITransformResult {
root: INode;
features: IFeatures;
}
and using IFeatures in all other appropriate locations.
As for the "body", I mean everything which is not a title starting with #, but lies between to headings. For example
# heading 1
this is the body 1
## heading 1.1
As for the "note", you may find it in https://www.mindmup.com/
Why do I ask this? Because there is another question. Can we drag the node in the mindmap to re-arrange its order not only in mindmap but also in the markdown editor? If the mindmap can take note, then we can re-struct of the text in markdown easily.
Thanks
This is really great project. I have few suggestions for additional features.
- A
- B
- C
- D
- [E](test.md)
2. It would be great if it would work on anchor links as well.
- A
- B
- <a name='c'>C</a>
- D
- [E](test.md#c)
- A
- B
- <a name='c'>C</a>
- D
- E
- [C](test.md#c)
Currently I only see 5 or 6 levels of depth rendered. Is it possible to make this customizable?
Hello, this project is very helpful. I like it very much, thank you for sharing.
I hope to add the following functions:
cell, the cell will not have any connection with other parts. Because I think there are sometimes such demands.Thank you. Thanks again for sharing.
It would be nice to have a possibillity to change styles. Or chose from several at least. For example this simple style. Key feature of this style is that words are not underscored (nodes style isn't so important, as for me), I'm sure this kind of mind maps are easier to perceive.
This library is based on D3.js, so, is it possible to support more customization features, like line style， node style and layout ?
Hey, it's an awesome tool ! 👍
If it can support mathjax to render math symbols, equation, etc. , it would be better for taking science notes ! 😝
I introduced the library you wrote through the script tag, I have not written TS code, to get your help, thank you.
Which function is brain image zoom in and zoom out, and how to call it in the browser?
Which function to download the HTML and how to call it in the browser?
Hi @gera2ld,
Love your Markmap-project since it started an few months back!
I noted that when downloading an interactive HTML file, it doesn’t output a working HTML any longer. There’s just an “undefined“ error shown in Firefox / Chrome and that’s it. Here’s my sample file...
https://www.dropbox.com/s/ss9b4ykfs0f7925/201012-Information-Architecture.html?dl=0
Can you replicate the issue on your end?
Awesome tool, but it can't support the emoji syntax like :smile:
The bold text styling using **bold** is not working.
The bold font weight is being overwritten with font-weight: 500 by a different class in the css somewhere.
Hi,
I've included your awesome lib inside an Angular 9 application.
When I load prismJS plugin as indicated in the API documentation, I get the following error:
ERROR Error: Uncaught (in promise): [object Undefined]
at resolvePromise (zone-evergreen.js:798)
at SVGSVGElement.<anonymous> (zone-evergreen.js:705)
at Dispatch.call (dispatch.js:57)
at start (schedule.js:88)
at schedule (schedule.js:66)
at timerFlush (timer.js:61)
at wake (timer.js:71)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41344)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
Despite this, the map and the plugin work perfectly, but I wonder if there is a way to avoid this error message in the console.
I just want to get stirng data of <svg> tag, result of markmap instead of drawing directly on DOM. Is there an any way to get this?
It could be good to archive a markmap with the original text , to relive it later.
( and why not with a 'copy' button to easily get the source text )
I was expecting this button to expand the canvas to the full screen and thought it's buggy. Only later I realized that it means "reset the zoom to 1:1". Maybe some different symbol could be used, like that magnifying glass with a plus/minus in it?
When I typed those codes,
.
the results were
The mathjax could not recognize this code “$\mathcal{L}{12}=S{1}$“.
Would you have plan to build a vscode extension?
Hello - I apologize if I am doing something wrong or have missed a step but I get an error when I run the command:
markmap CORE.md
/usr/lib/node_modules/markmap-lib/dist/index.js:39
style = { ...style,
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object. (/usr/lib/node_modules/markmap-lib/bin/cli.js:4:27)
Have I missed something?
it goes wrong when specify a language next to the backticks
for example
\```java
it shows undifine
\```
\```
but this run well
\```
Hello, thank you very much for sharing.
I hope to add more settings for rendering effects, such as the distance between lines, color, background, etc.
Thank you.
Is it possible to deactivate the pan and zoom features?
is is possible to load the image as a clickable image?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.