Coder Social home page Coder Social logo

damaru / xmind-viewer Goto Github PK

View Code? Open in Web Editor NEW

This project forked from xmindltd/xmind-viewer

1.0 1.0 0.0 140 KB

XMind Viewer, is a lightweight library to parse a .xmind file and render it in SVG.

License: MIT License

HTML 0.36% TypeScript 98.66% CSS 0.17% JavaScript 0.81%

xmind-viewer's Introduction

DEPRECATED - Never ever use it in a production environment!

XMind Viewer

XMind Viewer, is a lightweight library to parse a .xmind file and render it in SVG.

It's very useful for showing a mind map on any web pages. Like a blog post, a book introduction, a page navigation, etc. All versions of XMind files are compatiable, which means you can generate an XMind file with XMind SDK and then render it with XMind Viewer. Cool?

XMind Viewer is an official project, made by XMind team, and written in TypeScript.

Usage and Getting Started

Usage in Node.js

$ npm i --save xmind-viewer
const { loadFromXMind, SnowbrushRenderer } = require('xmind-viewer')

Simple Usage

import JSZip from 'jszip'
import { loadFromXMind, SnowbrushRenderer } from 'xmind-viewer'

new JSZip().loadAsync(zipFile).then(zip => {
	loadFromXMind(zip).then(data => {
		const renderer = new SnowbrushRenderer(data.sheets)
		return renderer.render({ sheetIndex: 0 })
	}).then(svg => {
		// document.body.appendChild(svg)
	})
})

loadFromXMind()

loadFromXMind() can be used to convert .xmind files into sheets that can be read by Snowbrush Render

Snowbrush Renderer

Snowbrush Renderer accepts an array of sheets as a constructor argument, and SVG will be generated based on the content of the sheet after using render().

P.S. Snowbrush is an internal code name for render engine.

Methods

.render(options: RenderOptions) => Svg

SVG will be generated based on the content of the sheet after using render(). You can use options to determine which Sheet you want to display.

RenderOptions

sheetIndex: Select which sheet you want to render.

.svg => Svg

Get the generated SVG, it must be called after render().

.transform(x, y)

Move the center point of the mindmap to the location (x, y).

Notice

In addition to these exposed API, the rest of the code can change at any time.

License

See the MIT License.

xmind-viewer's People

Stargazers

 avatar

Watchers

 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.