syntax error was observed if class diagram contains comment syntax with curly bracket like %%{

[tomoyukim]

Describe the bug
I found syntax error is occurred if class diagram has comment syntax with curly brace like %%{. This was originally reported on tomoyukim/vscode-mermaid-editor#35 and I could reproduced on live editor as well. Please take a look at screenshot.

To Reproduce
Steps to reproduce the behavior:

1. Try to render class diagram including %%{

For example,

classDiagram
	%%{
	Animal <|-- Duck
	Animal <|-- Fish
	Animal <|-- Zebra
	Animal : +int age
	Animal : +String gender
	Animal : +String sample
	Animal: +isMammal(a)
	Animal: +mate()
	class Duck{
		+String beakColor
		+swim()
		+quack()
	}
	class Fish{
		-int sizeInFeetaaaa
		-canEat()
	}
	class Zebra{
		+bool is_wild
		+run()
	}

Expected behavior
class diagram should be previewed.

Screenshots

Additional context
This was not observed on erDiagram at least.

[NeilCuzon]

The syntax is that of a directive, which is a method of changing the diagram's rendering configuration.
I would refrain from using "%%{" or "}%%", unless you intend to use them for directives.

Example below changes theme to dark:
%%{init: { "theme": "dark" }}%%
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}

[NeilCuzon]

I have added this to the documentation and will be more visible to users. Thanks for the contribution we really appreciate it, with that I will close this issue.

https://github.com/mermaid-js/mermaid/blob/master/docs/n00b-syntaxReference.md#diagram-breaking