Шаблон:Mermaid

{{Mermaid}} — шаблон, позволяющий внедрять в страницы визуализации, отрисованные программой Mermaid.

Визуализация описывается особым языком, похожим на Markdown.

Программа визуализации написана на языке JavaScript и выполняется на стороне сервера с помощью node.js и puppeteer. Таким образом, отображение визуализации не зависит от наличия JavaScript в браузере и даже от наличия самого браузера.

Параметры

1. или mermaid — описание визуализации. Все | должны быть заменены на {{!}}, }} на } }, = на {{=}} (вместо последнего можно использовать именованный параметр mermaid),

• ширина (необязательный) — ширина в пикселях,
• высота (необязательный) — высота в пикселях,
• тема (необязательный) — тема. Возможные значения: default (умолчание), neutral, forest, dark,
• фон (необязательный) — цвет. Возможные значения: #RRGGBB или название цвета CSS. Умолчание: white.

Примеры

Викитекст	Вывод
{{mermaid|sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! }}	%%{init: {'width':'800','height':'600','theme':'default','background':'white','look':'classic'}}%% sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
{{mermaid|theme=dark|background=transparent|classDiagram Class01 <{{!}}-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --{{!}}> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label}}	%%{init: {'width':'800','height':'600','theme':'dark','background':'transparent','look':'classic'}}%% classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label
{{mermaid|theme=neutral|%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'tagLabelColor': '#ff0000', 'tagLabelBackground': '#00ff00', 'tagLabelBorder': '#0000ff' } } }%% gitGraph commit branch develop commit tag:"v1.0.0" commit checkout main commit type: HIGHLIGHT commit merge develop commit branch featureA commit }}	%%{init: {'width':'800','height':'600','theme':'neutral','background':'white','look':'classic'}}%% %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': { 'tagLabelColor': '#ff0000', 'tagLabelBackground': '#00ff00', 'tagLabelBorder': '#0000ff' } } }%% gitGraph commit branch develop commit tag:"v1.0.0" commit checkout main commit type: HIGHLIGHT commit merge develop commit branch featureA commit

Требуемые настройки External Data

// in /var/www/js: npm install @mermaid-js/mermaid-cli
$wgMmdColonReplacement = '(colon)';
$wgExternalDataSources  ['mermaid'] = [
	'name'              => 'mermaid', // need fallback to data source in version report.
	'command'           => '/var/www/js/node_modules/.bin/mmdc -w $width$ -H $height$ -t $theme$ -b $background$',
	'limits'            => [ 'memory' => 0 ],
	'version command'   => '/var/www/js/node_modules/.bin/mmdc -V',
	'program url'       => 'https://mermaid-js.github.io',
	'params'            => [ 'mmd', 'width' => '800', 'height' => '600', 'theme' => 'default', 'background' => 'white' ],
	'param filters'     => [ 'width' => '/^\d+$/', 'height' => '/^\d+$/', 'theme' => '/^(default|forest|dark|neutral)$/i', 'background' => '/^(\w+|\#[0-9A-F]{6})$/i' ],
	'input'             => 'mmd',
	'temp'              => 'out.svg',
	'min cache seconds' => 30 * 24 * 60 * 60,
	'tag'               => 'mermaid',
	'preprocess'        => static function ( string $mmd ) use ( $wgMmdColonReplacement ): string {
		// Replace all colons in wikilinks with a placeholder:
		return preg_replace_callback(
			'/\[\[[^]|]*(?:|[^]]+)?]]/u',
			static function ( array $captures ) use ( $wgMmdColonReplacement ): string {
				return preg_replace( '/:/', $wgMmdColonReplacement, $captures[0] );
			},
			$mmd
		);
	},
	'postprocess'       => static function ( string $svg, array $params ) use ( $wgMmdColonReplacement ): string {
		$links = false;
		$colon = preg_quote( $wgMmdColonReplacement, '/' );
		// Wrap <text>[[Link]]</text> with <a>:
		$svg = preg_replace_callback(
			'/<text(?<attrs>[^>]*)>\s*\[\[(?<page>[^]|>]+)(\|(?<alias>[^]>]+))?]]\s*<\/text>/',
			static function ( array $captures ) use ( &$links, $colon ): string {
				$links = true;
				$title = preg_replace( "/$colon/", ':', $captures['page'] );
				$text = preg_replace( "/$colon/", ':', $captures ['alias'] ?? $captures['page'] );
				return '<a xlink:href="' . CoreParserFunctions::localurl( null, $title ) . '">'
						. '<text ' . $captures['attrs'] . '>' . $text . '</text></a>';
			},
			$svg
		);
		// Add xmlns:xlink="http://www.w3.org/1999/xlink", if necessary:
		if ( $links ) {
			$svg = preg_replace( '/xmlns="[^"]+"/', '$0 xmlns:xlink="http://www.w3.org/1999/xlink"', $svg );
		}
		return '<div class="ext-mermaid" data-mermaid="' . htmlspecialchars( $params['mmd'] ) . '">' . $svg  . "</div>\n";
	}
];

Системные требования

• node.js,
• @mermaid-js/mermaid-cli,
• External Data.

Ссылки

• About Mermaid.