I love the syntax of railroad diagrams on json.org which are a graphical representation of the BNF language. I haven't found any tools that can produce results as eloquently.
There is an Online Railroad Diagram Generator. It creates SVG syntax diagrams, also known as railroad diagrams, from context-free grammars specified in EBNF. You can copy the SVG code or take screen shots.
You have to type in the grammar and it'll make the diagram.
For example, to create the first railroad diagram you show, you would use the code:
object ::= '{' ((string ':' value ) ( ',' string ':' value )*)? '}'
Then you could go on to define string
and value
using string ::= ...
and value ::= ...
The references are all shown.
Check out some of the example diagrams on the page. They have XML and even EBNF itself.