@mdit/plugin-uml

Plugin to support splitting contents from context.

Usage

import { uml } from "@mdit/plugin-uml";
import MarkdownIt from "markdown-it";

const mdIt = new MarkdownIt().use(uml, {
  name: "demo",
  open: "demostart",
  close: "demoend",
  renderer: (tokens, index) => {
    // render content here
  },
});

mdIt.render(`\
@demostart
Content
Another content
@demoend
`);

This plugin will extract content between @openmarker and @closemarker into a single token, then render it with renderer function.

Tips

The plugin is different from container plugin as contents inside container will be parsed as markdown, but contents inside uml will be parsed as plain text and transform in to a single token.

Escaping

You can use \ to escape @, so the following won't be parsed:
```
\@demostart

\@demoend
```

Security

The title attribute is always escaped. Following markdown-it's html option semantics, the default renderer only escapes the extracted content when html: false (the default), so author-provided HTML inside a UML block is rendered as plain text. With html: true, the content is kept as raw HTML: author HTML is trusted in that mode, so sanitize the rendered output before displaying it (markdown-it does not sanitize it for you). Pass your own renderer if you need full control.

Options

All four options are required by the TypeScript types.

nameRequiredstring

UML name. Defaults to "uml" at runtime.

openRequiredstring

Opening marker. Defaults to "start" at runtime.

closeRequiredstring

Closing marker. Defaults to "end" at runtime.

rendererRequiredRendererRule

/**
 * @param tokens - List of tokens.
 * @param index - Current token index.
 * @param options - Markdown-it options.
 * @param env - Markdown-it environment.
 * @param self - Markdown-it renderer instance.
 *
 * @returns Rendered HTML string.
 */
type RendererRule = (
  tokens: Token[],
  index: number,
  options: Required<MarkdownItOptions>,
  env: Env | undefined,
  self: Renderer,
) => string;

Render function. Defaults to the built-in renderer at runtime, which wraps the content in a <div> whose class is the UML name and whose title is the escaped info string.

See the comparison report for the full upstream comparison.