← Back to Home

Support

Code to Diagram

Get Help

Thank you for using Code to Diagram! I'm committed to providing excellent support and ensuring you have the best experience creating diagrams for your designs.

Email Support:
bhavnani.naveen@gmail.com

Response Time: Typically within 24-48 hours

Before Contacting Support

Please include the following information in your support request:

Supported Diagram Types

DOT (Graphviz) - Flowcharts & Directed Graphs

Best for: Flowcharts, state machines, dependency graphs, network diagrams

DOT Quick Reference

  • digraph G { A -> B } - Basic directed graph
  • node [shape=box] - Rectangle nodes
  • node [shape=ellipse] - Oval nodes (default)
  • node [shape=diamond] - Decision nodes
  • [style=filled, fillcolor=lightblue] - Colored nodes
  • A [label="Custom Label"] - Node labels
  • A -> B [label="text"] - Edge labels
  • rankdir=TB - Top to bottom layout
  • rankdir=LR - Left to right layout

Example:

digraph G {
  rankdir=TB
  Start [shape=ellipse]
  Process [shape=box]
  Decision [shape=diamond]
  Start -> Process
  Process -> Decision
}

Nomnoml - UML Class Diagrams

Best for: Class diagrams, object relationships, software architecture

Nomnoml Quick Reference

  • [ClassName] - Simple class
  • [ClassName| +field: type | +method()] - Class with fields and methods
  • [A] -> [B] - Association (directed)
  • [A] - [B] - Association (undirected)
  • [Child] -:> [Parent] - Inheritance
  • [Whole] +--> [Part] - Composition
  • [Whole] o--> [Part] - Aggregation
  • [<note> This is a note] - Note

Example:

[User| +name: string | +login()]
[Application| -config | +start()]
[User] -> [Application]

WaveDrom - Digital Timing Diagrams

Best for: Digital signal timing, waveforms, protocol documentation

WaveDrom Quick Reference

  • "wave": "p" - Positive edge clock
  • "wave": "n" - Negative edge clock
  • "wave": "0" - Low signal
  • "wave": "1" - High signal
  • "wave": "x" - Unknown/invalid
  • "wave": "=" - Data (use with data array)
  • "wave": "." - Continue previous state
  • "data": ["A", "B"] - Data values

Example:

{ "signal": [
  { "name": "clk", "wave": "p......" },
  { "name": "data", "wave": "x.345x.", "data": ["A", "B", "C"] },
  { "name": "req", "wave": "0.1..0." }
]}

Frequently Asked Questions

Q: My diagram shows "Invalid syntax". What's wrong?

A: Each syntax type has specific requirements:

  • DOT: Must start with digraph or graph
  • Nomnoml: Use square brackets for classes: [ClassName]
  • WaveDrom: Must be valid JSON starting with { "signal": [

Q: The "Add to design" button is disabled. Why?

A: The button is disabled until valid diagram code is entered. Make sure your syntax is correct and the preview shows a valid diagram.

Q: Can I use this for complex enterprise architecture diagrams?

A: Yes! DOT (Graphviz) and Nomnoml can handle quite complex diagrams. However, for very large diagrams with hundreds of nodes, rendering may take longer or the preview may be cramped. Consider breaking large diagrams into smaller sections.

Q: Why does my WaveDrom code show an error?

A: WaveDrom requires valid JSON format. Common issues:

  • Missing quotes around property names
  • Trailing commas after the last item
  • Single quotes instead of double quotes

Q: Can I customize colors and styles?

A: Yes!

  • DOT: Use fillcolor, color, style attributes
  • Nomnoml: Use directives like #fill: #colorcode
  • WaveDrom: Colors are determined by signal states

Learn More

For comprehensive documentation on each syntax:

Feature Requests

Have an idea for a new feature or syntax support? I'd love to hear it! Send your suggestions to bhavnani.naveen@gmail.com.

Report a Bug

Found something that's not working correctly? Please email me with: