Diagramma che potrebbe spiegare il codice di una macchina di stato?

Probabilmente vorrai o un diagramma di stato tradizionale completo o un diagramma di pseudo stato sommario.

Il diagramma completo dovrebbe avere una cerchia di stati per ciascuno degli stati (nel tuo esempio) 72 e ciascuna delle transizioni (compresi i cicli self). Tale diagramma è buono per la documentazione e lo studio per le modifiche. È più facile da gestire rispetto al codice C in quanto sopprime la verbosità irrilevante.

Un diagramma di sintesi sarebbe meglio per un'introduzione al codice macchina dello stato. Richiederebbe di capire alcuni "super stati" che rappresentano gruppi di stati reali. Questo spesso non è troppo difficile. Nel tuo esempio, sembra che gli stati con il prefisso del nome "NS_HTML5TOKENIZER_COMMENT" possano essere raggruppati insieme, per esempio. Quindi nel tuo diagramma avresti un "superamento di commenti" per rappresentare questi sei sei stati reali. Quindi fai un diagramma di stato abbastanza normale usando questi super stati, mostrando le transizioni principali (o tutte, se vuoi la precisione) tra i super stati. Ciò riduce la complessità del diagramma e mostra le principali funzioni in corso nella macchina.

Per qualcosa che a lungo, la cosa migliore è creare un diagramma di stato dinamico. (Sì per i computer!) Non ne ho mai visto uno, ma è abbastanza facile immaginare una vista simile a un debugger del diagramma in cui hai "guardato" le variabili per tenere traccia dello stato corrente mentre fai delle scelte su quale stato esaminare. Finirà per permetterti di vedere tutto lo stato sullo schermo e capire le cose guardando ciò che accade quando le cose cambiano.

Potrebbe essere un po 'di lavoro, e qualcuno potrebbe averlo creato prima. Spero solo che l'idea aiuti.

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?

Suggerirei di definire lo scopo del diagramma e l'ambito dei dettagli che si desidera fornire. O vuoi un diagramma preciso o un diagramma generale.

I diagrammi che riflettono informazioni precise di solito finiscono in disordine. Per superare la complessità del diagramma, generalmente lo farai:

Rompere il flusso di stato in pezzi logici separati con inizio e fine chiari. Usa lo schema macchina dello stato per mostrare ogni set logico. Ordina i set in base allo stato iniziale o finale. Questo mostrerà il flusso di stato (ma non il codice). Il diagramma dello stato macchina suggerito da altri contributori a questo post è l'unico modo per rappresentare visivamente il cambiamento di stato visivamente.

In alternativa, usa lo pseudo codice con la tabella delle regole. La tabella delle regole riduce notevolmente la complessità del testo (vorrei che i linguaggi di programmazione potessero essere implementati nei loro editor). Questa combinazione mostrerà il flusso del programma e le regole per arrivare a un determinato stato ma non fornirà un flusso di transizione dello stato visivo ovvio.

Se stai fornendo un diagramma generale, puoi scegliere di mostrare gli stati principali su un diagramma di macchina dello stato.

Modifica: Un altro modo per rappresentare questo tipo di informazioni è usando una tabella / matrice. Mostra ogni stato in una colonna separata e ogni stato in una riga separata della matrice. L'intersezione rappresenta le condizioni in cui si verifica la transizione. Le celle vuote indicano che non c'è transizione di stato tra gli stati che si intersecano. Per mostrare la direzione della transizione, definire 2 colori. Uno per la transizione dal valore della riga al valore della colonna e un altro per rappresentare la transizione dal valore della colonna al valore della riga. L'opzione matrix proposta qui può essere utilizzata con tutti i suggerimenti sopra menzionati. se aggiungi un numero alle celle in cui si verificano le transizioni, puoi mostrare un flusso di transizioni (non mostrato nell'esempio).

un semplice diagramma di stato farebbe se non diventi troppo grande

tuttavia puoi semplificarlo un po 'eseguendo azioni quasi uguali ma con qualche piccola differenza visivamente simile nel diagramma

puoi controllare l'articolo wiki su diagrammi di stato UML per ulteriori letture

Adoro questo codice!

Abbiamo avuto venti anni di orientamento agli oggetti ora, ma alcune persone ancora non capiscono. Hey Geeks: C'è una differenza tra spaghetti alla carbonara e spaghetti code.

Poiché questo codice è generato, perché non lo visualizzi da un livello più alto di astrazione? Non sappiamo come funziona "generato da un altro file", ma sembra che il meccanismo sia più semplice da comprendere dalla prospettiva dell'altro file, altrimenti la generazione del codice non avrebbe alcun senso. A condizione che la trasformazione sia corretta, l'informazione è la stessa.

Esistono molte opzioni per rappresentare graficamente macchine di stato, tra le quali:

• diagrammi di stato e il suo famoso statuto successore, che è integrato in UML.
• Rete di Petri , se vuoi controllare l'esplosione combinatoria.

Alcuni strumenti sono in grado di generare codice da essi.