pintergreg / handout

Szoftverfejlesztés multinacionális vállalatoknál jegyzet
https://szfmv2021-osz.github.io/handout/
1 stars 9 forks source link

Improve mindmap #11

Closed pintergreg closed 4 years ago

pintergreg commented 4 years ago

Maybe using this: https://github.com/hizzgdev/jsmind

pintergreg commented 4 years ago

From https://github.com/mermaid-js/mermaid/issues/448#issuecomment-663178404 https://markmap.js.org/

pintergreg commented 4 years ago

Markmap

input

# foobar

## foo

- f
- o
- o

## bar

- b
- a
- r

./node_modules/.bin/markmap mm.md

output

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
  margin: 0;
  padding: 0;
}
#mindmap {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>

</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@5"></script><script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.7.11/dist/browser/view.min.js"></script><script>((data, init, items, opts) => {
        const {
          Markmap,
          loadPlugins
        } = window.markmap;
        (init ? init(loadPlugins, items, opts) : Promise.resolve()).then(() => {
          Markmap.create('svg#mindmap', null, data);
        });
      })({"t":"heading","d":1,"v":"foobar","c":[{"t":"heading","d":2,"v":"foo","c":[{"t":"list_item","d":3,"v":"f"},{"t":"list_item","d":3,"v":"o"},{"t":"list_item","d":3,"v":"o"}]},{"t":"heading","d":2,"v":"bar","c":[{"t":"list_item","d":3,"v":"b"},{"t":"list_item","d":3,"v":"a"},{"t":"list_item","d":3,"v":"r"}]}]})</script>
</body>
</html>

reading markdown from DOM

<!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/markmap-lib@0.7.11/dist/browser/view.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.7.11/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>

markdown must start at column 0.