Add Nomnoml Renderer

[rjwignar]

This fixes #466

Summary of Changes

This adds Nomnoml rendering support to ChatCraft using skanaar/nomnoml.

This feature was heavily based on Mermaid rendering support using mermaid-js. For example, Nomnoml rendering is handled by NomnomlPreview.tsx similar to how Mermaid rendering is handled by MermaidPreview.tsx, and similar to mermaid, the rendering is done in Markdown.tsx when a nomnoml code block is detected:

chatcraft.org/src/components/Markdown.tsx

Lines 108 to 115 in bb7c557

	} else if (language === "mermaid") {
	preview = (
	<MermaidPreview children={Array.isArray(children) ? children : [children]} />
	);
	} else if (language === "nomnoml") {
	preview = (
	<NomnomlPreview children={Array.isArray(children) ? children : [children]} />
	);

Differences from Mermaid rendering

Although this feature is modelled off of Mermaid rendering, due to the differences between the nomnoml and mermaid-js libraries I had to implement Nomnoml rendering differently:

No Error Message in the Nomnoml Preview

Whenever mermaidjs fails to render mermaid code, it renders an image in the preview, but
Nomnoml currently does not render an error image, so failed renders are rendered as a blank diagram instead:

No SVG ID value support

Unlike the mermaid-js render method, nomnoml's renderSvg method does not support an ID parameter, so in NomnomlPreview.tsx an ID value is not generated or assigned to the rendered SVG.

No config method/no way to directly modify default styling

Nomnoml currently (as of 1.6.2) does not expose a config method like mermaid.initialize.
This means there's currently no way to programatically modify the default styling of nomnoml diagrams.
However, nomnoml has directives that modify styling

Alternative Styling Modification

In the future, I see two ways users can reliably indirectly modify the styling:

• The user can update the system prompt with instructions for nomnoml styling
• Within a ChatCraft conversation, the user iteratively ask the LLM to modify the styling

However, both of these methods are heavily dependent on the LLM.
Even GPT-4 seems to hallucinate on nomnoml syntax when asked to modify styling, unless a directive example is provided

[cloudflare-pages]

Deploying chatcraft-org with    Cloudflare Pages

Latest commit:	30cc7e0
Status:	✅  Deploy successful!
Preview URL:	https://b7ce200b.console-overthinker-dev.pages.dev
Branch Preview URL:	https://issue-466.console-overthinker-dev.pages.dev

View logs

[humphd]

Code looks good to me.

We should consider an update to the default system prompt to use this.

[tarasglek]

Lets change it
Use nomnoml or Mermaid diagrams when discussing visual topics seems to work great

[rjwignar]

Hi @tarasglek, @humphd, I've updated the default system prompt following your suggestions.
I've also added new changes to the PR and updated my PR summary. I'm interested to see if you have any thoughts or suggestions on my observations when making this PR.

[humphd]

Love it!

[tarasglek]

Love it!

This is fantastic diagram to use in a blog :)

[rjwignar]

Recently updated this PR with an error message that renders in the Nomnoml preview if the nomnoml code cannot be rendered:

Similar to MermaidPreview, copying the preview card when there's an error will still copy the actual error:

[WangGithub0]

It's so cool! Looks good to me!