Add documentation for front matter

[ketozhang]

There exist front matter for all diagrams (e.g., #3706), but there are no documentation of this

[ketozhang]

Looks like there are only two field supported: title and displayMode? @MasonM

mermaid/packages/mermaid/src/diagram-api/frontmatter.ts

Lines 25 to 46 in 31c0a0c

	export function extractFrontMatter(text: string, db: DiagramDB): string {
	const matches = text.match(frontMatterRegex);
	if (matches) {
	const parsed: FrontMatterMetadata = yaml.load(matches[1], {
	// To keep things simple, only allow strings, arrays, and plain objects.
	// https://www.yaml.org/spec/1.2/spec.html#id2802346
	schema: yaml.FAILSAFE_SCHEMA,
	}) as FrontMatterMetadata;
	if (parsed?.title) {
	db.setDiagramTitle?.(parsed.title);
	}
	if (parsed?.displayMode) {
	db.setDisplayMode?.(parsed.displayMode);
	}
	return text.slice(matches[0].length);
	} else {
	return text;
	}
	}

[sidharthv96]

Yes, currently only title and displaymode are supported, but we just added full config support to frontmatter today via #4750.

That has some added documentation

[ringerc]

The frontmatter docs at https://mermaid.js.org/config/configuration.html don't link to the actual config schema https://mermaid.js.org/config/schema-docs/config.html

[sdake]

In decmeber 2022, some work was done to deprecate directives and replace with front matter. The code says "we will add autogeneration" soon. May I suggest deleting the comments?

528facf#diff-07b4dc784ba66fda0a8637bb0e3900db0012b9be7f4dbb52f1432e5865065708L30