@wikipathways/kaavio-showdown NPM

kaavio-showdown

Extended MardDown syntax for Kaavio and the Manipulation API

Full docs are available here.

How to Install

$ npm install --save @wikipathways/kaavio-showdown

Getting Started

This package provides some special Markdown syntax for interacting with Kaavio diagrams. It's built on top of Showdown.

Make sure you have Kaavio installed.

import {getShowdown} from '@wikipathways/kaavio-showdown';

const kaavioInstance = YOUR_DIAGRAM_INSTANCE;
const showdown = getShowdown(kaavioInstance);
const converter = new showdown.Converter({
  extensions: ['kaavio'] // You may also use other extensions here
});

const markdown = SOME_MARKDOWN TO PARSE;
const HTML = converter.makeHtml();

Developing

Add new extensions to src/extensions; All files should be named the same as the function they export. Only one exported extension function per file.

Use the manipulationExtension (in generators) to help you make extensions. It returns the extension object using a RegEx pattern that matches the other extensions. It takes an extension name and an array objects with (optional) functions that should be called on each parameter.

The below example will enable syntax like [some text]!!yourExtensionName 'input'. This will convert to <a onclick="diagram.manipulator.yourExtensionName('input')>some text</a>.

import {manipulationExtensionGenerator} from './manipulationExtensionGenerator';

export const yourExtensionName = manipulationExtensionGenerator(
    'yourExtensionName',
    [
        {
            function:(input) => `'${input}'`,
            optional: false, // You must set this to true or false. 
        }
    ]
)

Note: Optional functions must appear in the array after all the required ones.

How to Test

To test your extensions simply create a sample MarkDown file in test/extensions and a corresponding HTML file that is what the MarkDown should convert to. Both files should follow the same name as your extension. The test runner will then automatically test the files.

Run one, or a combination of the following commands to lint and test your code:

$ npm run lint          # Lint the source code with ESLint
$ npm test              # Run unit tests with Mocha
$ npm run test:watch    # Run unit tests with Mocha, and watch files for changes
$ npm run test:cover    # Run unit tests with code coverage by Istanbul

Publishing

Make sure you're a member of the @wikipathways organization and have publishing rights
npm version <type>
npm run build
cd dist
npm publish
cd ../