risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come generare un grafico delle dipendenze con il testo

Esiste un semplice strumento online che genererà un grafico delle dipendenze (caselle collegate da linee di freccia) basato su input di testo come:

A -> B

Proprio come questo:

www.websequencediagrams.com

(Genera un diagramma di sequenza)

41
hello_harry

graphviz è uno strumento per la generazione di grafici.

webgraphviz.com è un'app Web che utilizza graphviz e consente di modificare il testo e visualizzare il grafico corrispondente (contiene anche 5 campioni/esempi).

graphviz accetta input in questo modo:

digraph G {
   A->B
}
54
Luis Muñiz

http://www.nomnoml.com

Sta usando la sintassi:

[A] -> [B]
6
fab

So che è davvero vecchio, ma potrebbe aiutare qualcun altro in seguito.

Personalmente mi piace yUML.me

Data la seguente sintassi ...

[note: You can stick notes on diagrams too!{bg:cornsilk}],
[Customer]<>1-orders>[Order], 
[Order]++*-items>[LineItem], 
[Order]-1>[DeliveryMethod], 
[Order]*-products>[Product], 
[Category]<->[Product], 
[DeliveryMethod]^[National], 
[DeliveryMethod]^[International]

... puoi generare un diagramma piuttosto complesso. E per facilitarne l'uso, tutto questo è esposto come una serie di semplici URL che puoi incorporare in quasi tutti i documenti basati sul Web.

  • Modifica in seguito - Per tornare indietro e modificare l'immagine in un secondo momento: http://yuml.me/edit/5a963e1b
  • Immagine PNG - Per blog, wiki o e-mail. Sfondo trasparente: http://yuml.me/5a963e1b
  • Documento PDF - Ottimo per la stampa. Zoom infinito.
  • Immagine JPEG - Sfondo solido. Gioca meglio con alcuni strumenti desktop.
  • File JSON - Per salvare programmaticamente metadati.
  • Grafica vettoriale SVG - Sperimentale!
6
SireInsectus
  • Vai a questa pagina: Interactive GraphSource Demo
  • Passa la casella combinata sopra a "Binding dinamici"
  • Immettere questi valori nei campi
    • Fonte nodi: ['Dummy']
    • Fonte dei bordi: ['A->B', 'A->C', 'D->C', 'D->A']
    • Lazy Node Definizione: selezionato
    • Source Node Binding: function(Edge) { return /(.+)->(.+)/.exec(Edge)[1];}
    • Target Node Binding: function(Edge) { return /(.+)->(.+)/.exec(Edge)[2];}
    • Lascia il resto così com'è
  • Premi il pulsante New Graph
  • Guarda l'animazione e fai uno screenshot!
5
Sebastian

Oppure puoi usare la sirena. https://mermaidjs.github.io/ , disponibile anche negli interpreti di Markdown.

2
M.Balázs