We have a lot of concepts in making diagrams like UML and flowcharting or just making up whatever boxes-and-arrows combination works at the time, but I'm looking at doing a visual diagram on something that's actually really complex.State machines like those that parse HTML or regular expressions tend to be very long and complicated bits of code.For example, this is the stateLoop for FireFox 9 beta. It's actually generated by another file, but this is the code that runs.How can I diagram something with the complexity of this in a way that explains flow of the code without taking it to a level where I draw every single line-of-code into it's own box on a flowchart?I don't want to draw Invoke loop, then return but I don't want to explain every last detail.What kind of graph is suitable to do this? Is there already something out there similar to this? Just an example of how to do this without going overboard in complexity or too-high-level is really what I want.If you don't feel like looking at the code, basically it's 70 different state flags that could occur, inside an infinite loop that exists to a label based on some conditions, each flag has it's own infinite loop that exists to a label somewhere, and each of those loops has checks for different types of chars, which then runs off into various other methods.
Diagram that could explain a state machine's code?
documentation generation;diagrams;flowchart
You probably will want either a full traditional state diagram or a summary pseudo-state diagram.  The full diagram would have a state circle for each of the (in your example) 72 states, and each of the transitions (including self loops).  Such a diagram is good for documentation and study for modifications.  It is easier to deal with than the C code as it suppresses the irrelevant verbiage.A summary diagram would be better for an introduction to the state machine code.  It would require you to figure out some super states that represent groups of real states.  This is often not too hard. In your example, it looks like the states with the NS_HTML5TOKENIZER_COMMENT name prefix can be grouped together, for instance.  So in your diagram you would have one comment parsing super state to represent these 6 six real states.  Then you make a fairly normal state diagram using these super states, showing the major transitions (or all, if you want accuracy) between the super states.  This reduces the complexity of the diagram and show the major functions going on in the machine.