Code Monkey home page Code Monkey logo

react-mindmap's Introduction

This is a online mindmap app using blink-mind library.

Online Demo

Demo

Example mind map You can download example mind maps from the repository: https://github.com/awehook/mindmap and use this app open the mind map file.

image

Features

  • Markdown editor for topic and topic notes.

image

  • flowchart can be attached to topic.

image

image

  • HotKey support.

image

  • Reorganize the diagram by drag and drop.

image

  • Multiple theme.

image

  • Style customization.

image

How to run

yarn install
yarn start

Then open localhost:3000

image

react-mindmap's People

Contributors

awehook avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-mindmap's Issues

yarn start后无法edit note

您好!当我在本地启动此项目后,右键topic去edit note,但是报错如下,无法进行编辑。不知道能否帮助解决。谢谢!
2

Connecting to previous Nodes

Would be great if we can connect a node to any other node in the network. For example, the following would crash if you tried to load it because SuccessPrompt2 connects back to a previous node:

{"rootTopicKey":"307dfaa7-db41-4611-90d4-e7c4cf53ca78","topics":[{"key":"307dfaa7-db41-4611-90d4-e7c4cf53ca78","parentKey":null,"subKeys":["fddd2e35-ba5e-4bf4-b3e3-3cef23b431d3"],"collapse":false,"style":null,"blocks":[{"type":"CONTENT","data":"MainTopic"}]},{"key":"fddd2e35-ba5e-4bf4-b3e3-3cef23b431d3","parentKey":"307dfaa7-db41-4611-90d4-e7c4cf53ca78","subKeys":["66320723-1cef-4e64-afd8-6879bad3f58d","12946e8a-cca8-42cf-b774-6d481243eb8f"],"collapse":false,"style":null,"blocks":[{"type":"CONTENT","data":"Welcome2"},{"type":"DESC","data":"ACTION: TEXT\nDATA: this is the data to show \\- do you want me to scan your computer\n"}]},{"key":"12946e8a-cca8-42cf-b774-6d481243eb8f","parentKey":"fddd2e35-ba5e-4bf4-b3e3-3cef23b431d3","subKeys":["2819ad5c-197d-4657-8e2c-77e0c5ddce38"],"collapse":false,"style":"{\"contentStyle\":{\"background\":\"#4a90e2\"}}","blocks":[{"type":"CONTENT","data":"YesAction"},{"type":"DESC","data":"ACTION: Scan\nTEXT: I'm now scanning your computer\n"}]},{"key":"2819ad5c-197d-4657-8e2c-77e0c5ddce38","parentKey":"12946e8a-cca8-42cf-b774-6d481243eb8f","subKeys":[],"collapse":false,"style":null,"blocks":[{"type":"CONTENT","data":"SuccessPrompt2"}]},{"key":"66320723-1cef-4e64-afd8-6879bad3f58d","parentKey":"fddd2e35-ba5e-4bf4-b3e3-3cef23b431d3","subKeys":["307dfaa7-db41-4611-90d4-e7c4cf53ca78"],"collapse":false,"style":null,"blocks":[{"type":"CONTENT","data":"NoAction"},{"type":"DESC","data":"ACTION: NOScan\nTEXT: I'm NOT scanning your computer"}]}],"config":{"readOnly":false,"allowUndo":true,"layoutDir":0,"theme":{"name":"default","randomColor":true,"background":"rgb(57,60,65)","highlightColor":"#50C9CE","marginH":60,"marginV":20,"contentStyle":{"lineHeight":"1.5"},"linkStyle":{"lineRadius":5,"lineType":"curve","lineWidth":3},"rootTopic":{"contentStyle":{"fontSize":"34px","borderRadius":"35px","padding":"16px 18px 16px 18px"},"subLinkStyle":{"lineType":"curve","lineWidth":3,"lineColor":"rgb(113, 203, 45)"}},"primaryTopic":{"contentStyle":{"borderWidth":"1px","borderStyle":"solid","borderRadius":"20px","fontSize":"17px","padding":"10px 15px 10px 15px"},"subLinkStyle":{"lineType":"curve","lineWidth":3,"lineColor":"rgb(113, 203, 45)"}},"normalTopic":{"contentStyle":{"border":"1px solid #e8eaec","borderRadius":"20px","fontSize":"17px","padding":"4px 10px"},"subLinkStyle":{"lineType":"curve","lineWidth":3,"lineColor":"white"}}}},"version":null}

Would be great to have multi-directional graphs to illustrates workflows.

issue

右击出现的弹框能改吗

used <Mindmap /> component imported in my local project, but encountered CSS issue

Hi, thank you for this awesome project. I really like it. I am writing this issue to see what could be it that I am missing since the component is failing to load the necessary css to keep the same as in demos, I have attached the screenshots FYI. I really appreciate it, if you could help me understand the missing CSS import in my case, it can be helpful for others that might encounter this problem as well.
Screenshot 2020-04-26 at 3 15 27 PM
this one is from my localhost in my project

Screenshot 2020-04-26 at 3 19 31 PM

this one is from this repo, cloned and ran locally. the main problem as you can see in these 2 images is that width and height in my local project are very huge, I am suspecting there is a CSS import that I am missing. But I looked at it all, I copied the same folder and components used in this repo, but unsuccessful to fix this issue. Please look into it

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.