New Components：streamlit-markmap

Custom Components
1

Markmap Component for Streamlit

GitHub - echoopen/streamlit-markmap: streamlit-markmap

Visualize your Markdown as mindmaps.

This project is heavily inspired by markmap.

Installation

pip install streamlit-markmap==1.0.1

Example

1、a simple case

image-20230203094637582
image-202302030946375821387×522 32.5 KB 

import streamlit as st
from streamlit_markmap import markmap

st.set_page_config(page_title="markmap", layout="wide")

with open('markdown_data/data.md', encoding='utf-8') as fp:
    md = fp.read()
    #  data = '''
    #       # A
    #       ## AA
    #       ### AAA
    #       #### AAAA
    #       ##### AAAAA
    #       # B
    #       ## BB
    #       ## BC
    #       ### BCA
    #       # C
    #       ## CC
    #       ## CD
    #       ### CDC
    #       ### CDD
    #       ## CE
    #       ### CEC
    #       ### CED
    #       '''
markmap(md,height=400)
2、a complex case

这个例子参考了markmap网站案例，同时因不知使用markmap项目是否需要声明，如需可随时增加相关声明。

This example is a reference to the markmap website, and as it is not known whether a declaration is required to use the markmap project, feel free to add one if you wish.

image-20230202215117681
image-202302022151176811391×617 57.4 KB 

import streamlit as st
from streamlit_markmap import markmap

st.set_page_config(page_title="markmap", layout="wide")

data = '''
---
markmap:
  colorFreezeLevel: 2
---

# markmap

## Links

- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)

## Related Projects

- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)

## Features

- links
- **strong** ~~del~~ *italic* ==highlight==
- multiline
  text
- `inline code`
-
    ```js
    console.log('code block');
    ```
- Katex
  - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
  - [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option

'''

markmap(data, height=400)
5 Likes
2

Looks super nice!
Would you mind adding it to the community tracker in Streamlit Components - Community Tracker so we don’t lose track of it :slight_smile: ? Thank you!

Have a nice day!
Fanilo

3

Thank you!

4

@echoopen thanks a lot for the amazing component! Would you consider add offline support? It seems that streamlit-markmap cannot be correctly shown in local network with some network issue.

5

As the original author didn’t answered:
I’ve briefly checked the source of this extension: it does not contain no advanced JS, just Markdown rendered as HTML (one small function!).
I believe, you can use similar functionality offline by copying markmap JS script into your app and slightly modifying the code.

6

Can I set the zoom page and open the application with the nodes collapsed? I created a huge mind map, and when I open the streamlit viewer, the elements are all expanded and small