Menu tree generator

#1

image
image1280×771 86.6 KB

I need to generate tons of menu trees like this. Drawing manually in Photoshop is VERY boring.

I found this tool https://markmap.js.org/repl Which almost completely meets my needs. No additional code for markup except markdown.

But I need a little rework this tool, so this code renders into the picture above.

# Main header

## Subheader

- Simple item
- Hello
- One more
- Complex iitem
	- sub item
    - one more
    	- Lol
        - kek
        - cheburek
    - third

## Item 2

- Some item
- Easy item
- Much more
	- sub item
    - one more
    	- Lol
        - kek
        - cheburek
    - third

## Item 3

- links
- **inline** ~~text~~ *styles*
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    // Multiline code
    Hello
    ```
- MathJax - `\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)`
One more line in one item

Please help with this task, if you can.

UPD:

render
render1850×970 74.3 KB

First PoC made by @horcicaa https://github.com/Flipper-Zero/flipper-menu-generator

2 Likes
#2

https://graphviz.org/

Examples here https://graphviz.org/gallery/

2 Likes
#3

http://mimind.cryptobees.com/

#4

I would recommend this specific python wrapper. If you familiar with python it’s much easier to start than learn a new DSL (DOT). DOT is not hard but python is more convenient because often you need to generate/preprocess data for graph programmatically. (instead of making graph for one specific data)

https://graphviz.readthedocs.io/

#5

Mermaid diagrams: https://mermaid-js.github.io/mermaid/

Some samples:

```mermaid
 classDiagram
      Human -- |> Govno
      Human -- |> Mocha
      Human -- |> Privet
      Human: secret
      class Human {
         Kakatb
         Pisatb
         govoritb
      }
      class Govno {
          color
          smell
          taste
      }
      class Mocha {
          color
          espresso
          McCappucinos
      }
      class Privet {
          poka
          kak_dila
      }
```

or

```mermaid
graph LR
  kak_dela(Kak delya)

  Govno-->Mocha
  Govno-->Privet

  subgraph Human
  Privet
  Mocha --> Nice
  Mocha --> kak_dela
  end 

 subgraph Kakashka
 Govno==>Smell
 Govno==>Color
 end

```

and how it looks:

img-2020-09-12-12-58-46
img-2020-09-12-12-58-46498×787 17.9 KB

#6

Plantuml.com на базе graphviz.
Или ms word smart art как раз умеет деревья из текста с табуляцией

#7

Есть библиотека для python для генерации блочных схем, может помочь: https://pypi.org/project/bdp/

#8

https://markmap.js.org/repl/

1 Like
#9

Я использую миру, очень вариативная удобная, есть даже приложения но я в браузере держу)

#10

и оно же тут: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
#11

Choose any type of chart, code and go.
Works perfectly with vscode.

#12

Try using opensource solution: FreeMind
As alternative, you can use XMind

#13

I guess sooner or later it will be necessary to implement those menus to FW. So why not to use some generic format (e.g. YAML is pretty readable and easy to use) and write small script that will:

  1. generate nice image representation (e.g. via Graphviz)
  2. generate *.h file with menu definition that can be used directly in FW
#14

I hack together small PoC. It takes MD file, uses parser library from @zhovner’s example (https://github.com/gera2ld/markmap-lib) (so, NO YAML), translate it to dot syntax (Graphviz) and produces following image:

image
image1003×563 22.1 KB

It is not interactive, on the other hand, generation of images could be part of CI pipeline.

#15

I hack together small PoC.

Wow, amazing! Thank you.

could be part of CI pipeline

Yes, this is what I planned: on every application wiki page there can be a block with such code:

<!--- Menu structure -->

blabla
 
<!--- Menu structure end -->

And CI script will insert image right after this block.

#16

Is it possible you write a small demo on how to make this work?