Git Product home page Git Product logo

wisemapping-mindmap-viewer's Introduction

Simple web mindmap renderer.

Screenshot of a rendered mindmap

Fork of https://bitbucket.org/wisemapping/wisemapping-open-source, inspired by https://framagit.org/framasoft/framindmap

Demo

https://chezsoi.org/lucas/mindmap/mindmap-viewer

Usage

Once the JS bundle is generated, any static files web server will do the job. E.g. with Python:

make
python3 -m http.server  # then open http://localhost:8000/?optional_mindmap_name

Where optional_mindmap_name.xml must be in samples.

You can create those XML files from simple indented Markdown files with this Python script: https://github.com/Lucas-C/brain_dump

Theme style : fonts, colors, etc.

To define a global style, you can define the following style objects in Javascript, by taking inspiration from mindplot/TopicStyle.js:

  • CENTRAL_TOPIC_STYLE
  • MAIN_TOPIC_STYLE
  • SUB_TOPIC_STYLE
  • ISOLATED_TOPIC_STYLE

You can also define the following constants whose default values are in mindplot/Topic.js:

  • CONNECTOR_WIDTH
  • OUTER_SHAPE_ATTRIBUTES
  • OUTER_SHAPE_ATTRIBUTES_FOCUS
  • INNER_RECT_ATTRIBUTES

To define a different style per mindmap, you can use the following XML attributes:

  • bgColor
  • brColor
  • fontStyle : <font_size>;<font_family>;<font_color>;bold;italic

Developpement

The global project architecture is discribed here: https://wisemapping.atlassian.net/wiki/display/WS/Architecture The JS files loading order matters and is managed by the Makefile.

Using livereload (do not forget to define the $BROWSER env variable, or else lynx may fire up):

pip install --user https://github.com/Lucas-C/python-livereload/archive/master.zip
livereload --open-url-delay 1 --target mindmap-viewer-bundle.js . & watch -n 1 make

XSD schema

The mindmap-schema.svg is an interactive SVG visualisation of the eponymous XSD schema alongside, and was generated with xsdvi.

wisemapping-mindmap-viewer's People

Contributors

veigap avatar ebergama avatar pluna avatar claudiobarril avatar monsieurbelbo avatar pveiga avatar lucas-c avatar ralfmueller avatar

Watchers

James Cloos avatar

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.